にinnerTextを設定しました

Question

私はユーザーの入力が必要な小さなアプリケーションを持っていて、入力時にちょっとしたプレビューを表示したいと思います（Stackoverflowと同じように）。

私はこのような何かを試してみてください。

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

私はそれを無視し、ちょうど空白をレンダリング反応し、新しい行を追加しようとするまで、それは素晴らしい作品。私はバニラはJavaScriptでそれを行う場合でも、このようにそれをやって

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

は、トリックを行い、すべての改行は自動的に<br>タグになります。

リアクションにinnerTextを設定する方法はありますか、それともバニラのソリューションを使用するだけですか？

innerTextの使用に後退がありますか？

Answer 1

下記のコードが必要な場合があります。

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') 
);