반품에 대해 innerText를 설정하십시오

Question

사용자 입력이 필요한 작은 응용 프로그램이 있는데, 입력 할 때 약간의 미리보기를 표시하고 싶습니다 (정확히 Stackoverflow가 수행함). 나는 새로운 라인을 추가하려고 할 때까지

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

그것은 좋은 작품이 무시 반응 단지 공백을 렌더링 :

나는 이런 식으로 뭔가를하려고합니다. 나는 바닐라 자바 ​​스크립트에 그것을 할하지만이 같은 그 일을

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