ReactでinnerHTMLを実行したい

React.Componentのrenderメソッドでhtmlを描画する時に、htmlが含まれている場合は、エスケープされてしまう。

class Hoge extends React.Component {
  constructor(props) {
    super(props);
  }

  render(){
    //fooにhtmlが含まれていてもエスケープされてしまう
    return <span>{foo}</span>
  }
}

そこでエスケープされずにinnerHTMLのようにhtmlとして実行して欲しい場合は、dangerouslySetInnerHTML属性を使って描画することができるようだ。

class Hoge extends React.Component {
  constructor(props) {
    super(props);
  }

  render(){
    let createMarkup = function(){
      return {__html: '<span>foo</span>'};
    }
    //fooにhtmlが含まれていてもエスケープされてしまう
    return <span dangerouslySetInnerHTML={createMarkup()}></span>
  }
}

確かにhtmlとして認識してくれたが、dangerouslySetInnerHTML属性ってまたどっ直球すぎてすごい名前だな。