dangerouslySetInnerHTMLの利用に際して

とても悩んだため、備忘録がてらに記述します。

React.jsで親子関係を持つAとB（A<-B)のコンポーネントを作成した。
親(A)のstateを変更することで子(B)のコンポーネントの内容が自動に変更されるようにコーディングを行った。
出力したい内容物がHTMLだったため、dangerouslySetInnerHTMLプロパティを使用した。

react.js

var QuestionSentence = React.createClass({
　createMarkup :function(){
    return{__html: this.props.sentence}
  },
  render : function(){
    return (
        <p className="exam-panel-text" dangerouslySetInnerHTML={this.createMarkup()}></p>
    )
  }
});

上記のコードだと前に出力された内容物が画面上に残ったまま次の内容物が出力されることになった。

react.js

var QuestionSentence = React.createClass({
　createMarkup :function(){
    return{__html: this.props.sentence}
  },  
　render : function(){
    return (
        <div className="exam-panel-text" dangerouslySetInnerHTML={this.createMarkup()}></div>
    )
  }
});

pタグではなく、divタグで使用することで仕様通りの動きになった。