Reactjs：不变违规：ReactMount：具有相同`data-reactid`的两个有效但不相等的节点：.0.5

Question

现在，当我使用Reactjs和html5的“contentEditable”或“edit”模式时，我遇到了这个问题。

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

当我输入Enter或Shift Enter到新行时 - ＆gt;使用前一个元素创建新的相同元素

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

当我点击这些元素时 - ＆gt;将出现此错误。

我知道这是一个问题。有人可以给我解决方案吗？ 也许在“contenteditable”模式下创建新的另一个元素，或者在Reactjs中阻止处理隐式事件。

感谢。

Answer 1

这是一个众所周知的问题：https://github.com/facebook/react/issues/1466

例如，使用<div contentEditable dangerouslySetInnerHTML={{__html: '<p></p>'}} />是唯一的解决方法。

Answer 2

我有类似的问题，我使用key = {some random string}为新元素解决了这个问题。