set innerText auf Reagieren

Question

Ich habe eine kleine App, die Benutzereingaben nimmt, und ich möchte ihnen eine kleine Vorschau zeigen, während sie tippen (genau wie Stackoverflow es tut).

Ich versuche, so etwas wie dieses:

ReactDOM.render(
    <div>{user_input}</div>, 
    document.getElementById('preview') 
); 

Es funktioniert großartig, bis ich versuchen, eine neue Zeile einzufügen, reagieren sie ignoriert und macht nur einen weißen Raum. Aber wenn ich es auf Vanille Javascript tun:

var content = document.createElement('div'); 
content.innerText = user_input; 
document.getElementById('preview').appendChild(content); 

es so tun funktioniert den Trick und jeder Zeilenumbruch wird in einen <br> Tag automatisch eingeschaltet.

Gibt es eine Möglichkeit, innerText auf reagieren zu setzen oder sollte ich einfach mit der Vanille-Lösung gehen?

Gibt es einen Rückschlag bei der Verwendung von InnerText?

Answer 1

Der folgende Code ist möglicherweise, was Sie brauchen.

var user_inputs = ['line1', 'line2']; 
var inputs = user_inputs.map(function(user_input, idx){ 
    return <div key={idx}>{user_input}</div> 
}); 

ReactDOM.render(
    <div className="root">{inputs}</div>, 
    document.getElementById('preview') 
);