出力メッセージにHTMLを挿入するにはどうすればいいですか？

Question

ここをクリックすると、その下に表示されるライブ更新テキストが入力されています。私はボタンをクリックし、HTMLスパンまたはdivタグで入力された各単語をラップするために、ユーザをクリックしたいと思います。私はそれをすべて文字列として出力することができますが、htmlとして解釈する必要があります。

class App extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { message: '' }; 

    } 

    onChange(e) { 
     this.setState({message: e.target.value}); 
    } 

    onClick(e) { 
     var text = this.state.message.split(" "); 
     console.log(text); 
     var newText = ""; 
     text.forEach(function(element) { 
      newText += "<div>" + element + "</div>"; 
     }); 
     this.setState({message: newText}); 
    } 


    render() { 

     return (
      <div> 
       <InputBar onChange={this.onChange.bind(this)} value={this.state.message}/> 
       <UpdateCss onClick={this.onClick.bind(this)} /> 
       <Output message={this.state.message} /> 
      </div> 
     ) 
    } 
} 

ReactDOM.render(<App />, document.querySelector('.container')); 

現在、<div>this</div><div>is</div><div>a</div><div>string</div>のように出力されます。私が見ていない簡単な方法がありますか？

Answer 1

これは、ReactjsがHTMLを文字列として渡す方法であるため、dangerouslySetInnerHTMLを使用してみます。 https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml