Reactjs : 불변의 위반 : ReactMount : 동일한 'data-reactid`를 가진 두 개의 유효하지만 같지 않은 노드 : .0.5

Question

이제 Reactjs와 "contentEditable"또는 html5의 "edit"모드를 사용할 때이 문제를 만났습니다.

<div contenteditable="true"> 
<p data-reactid=".0.5">Reactjs</p> 
</div> 

내가 입력하거나 새 줄에 입력 Shift 키를 입력 할 때 -> 내가 논문 요소에 클릭하면

<div contenteditable="true"> 
<p data-reactid=".0.5">Reactjs</p> 
<p data-reactid=".0.5"></p> 
</div> 

이전 요소와 새 같은 요소를 확인 ->이 오류가 나타납니다.

나는 그것이 문제라는 것을 알고있다. 누군가 나에게 해결책을 줄 수 있습니까? "contenteditable"모드에서 다른 새로운 요소를 만들거나 Reactj에서 암시적인 이벤트를 처리하지 못하게 할 수 있습니다.

THanks.

Answer 1

이 알려진 문제입니다 : https://github.com/facebook/react/issues/1466

<div contentEditable dangerouslySetInnerHTML={{__html: '<p></p>'}} />을 사용하여이 인스턴스에 대한 유일한 해결 방법입니다.

Answer 2

비슷한 문제가있어서 새로운 요소에 key = {some random string}을 사용하여이 문제를 해결했습니다.