Reactjs: Violazione invariata: ReactMount: due nodi validi ma non uguali con lo stesso `data-reactid`: .0.5

Question

Ora ho riscontrato questi problemi quando utilizzo Reactjs e la modalità" contentEditable "o" modifica "di html5.

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

quando si digita Invio o Maiusc Invio per nuova linea -> Create una nuova stesso elemento con l'elemento precedente Quando clicco di elementi tesi

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

-> apparirà questo errore.

So che è un problema. Qualcuno può darmi la soluzione per questo? Forse crei un nuovo altro elemento in modalità "contenteditable" o impedisci la gestione di eventi impliciti in Reactjs.

THanks.

Answer 1

Questo è un problema noto: https://github.com/facebook/react/issues/1466

Uso <div contentEditable dangerouslySetInnerHTML={{__html: '<p></p>'}} /> è l'unica soluzione per esempio.

Answer 2

Ho avuto un problema simile e ho risolto questo problema utilizzando key = {some random string} per il nuovo elemento.