Reactjs: Invariant Violation: ReactMount: Zwei gültige, aber ungleiche Knoten mit der gleichen `Daten-Reactid`: .0.5

Question

Nun, ich traf diese Probleme, wenn ich Reactjs und" contentEditable "oder" bearbeiten "-Modus von HTML5.

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

Wenn i-Typ eingeben oder Umschalttaste gedrückt, um neue Zeile eingeben -> Knüpfen Sie neue gleiche Element mit dem vorherigen Element

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

Wenn ich Elemente in Thesen klicken -> dieser Fehler wird angezeigt.

Ich weiß, dass das Problem ist. Jemand kann mir die Lösung dafür geben? Vielleicht erstellen Sie ein anderes Element im "contenteditable" -Modus oder verhindern Sie das implizite implizite Ereignis in Reactjs.

THanks.

Answer 1

Dies ist ein bekanntes Problem: https://github.com/facebook/react/issues/1466

<div contentEditable dangerouslySetInnerHTML={{__html: '<p></p>'}} /> Verwendung ist die einzige Lösung zum Beispiel.

Answer 2

Ich hatte ähnliches Problem und ich löste dieses Problem mit key = {some random string} für neues Element.