ReactにHTMLコメントを挿入する

Question

React JSXにHTMLコメントノードを挿入する方法はありますか？コンポーネントまたはDOMノードを挿入する方法と同じですか？

例えば、のようなもの：そう{ /* this /* }は私の質問に答えていない、という考えはコメントがページに表示されていることである

<!-- comment text --> 

：

React.createElement(Comment, {}, "comment text"); 

はにレンダリングするでしょう。次の関連質問には答えを持っていると多少異なる何かを要求しません

注：

How to render a HTML comment in React?

は、私は1つだけコメントノードをレンダリングします。私は、ReactインフラストラクチャがHTMLコメントをそれ自身でレンダリングすることに気付きました。おそらく、それをやるための（ちょっとハッキリな）方法があります。

Answer 1

私は考えることができるのは、componentDidMountのDOMを操作してそこにコメントを追加することですが、ReactはそのDOM操作を処理しないため、いくつかの問題が発生する可能性があります。

var HTMLComment = React.createClass({ 

     componentDidMount: function(){ 
     var htmlComment = "<!--" + this.props.comment + "-->"; 
      this.span.innerHTML = htmlComment; 
     }, 

     render: function(){ 
     return (
      <span ref={(span) => this.span = span} ></span> 
     ) 
     } 
    }) 

Answer 2

別の方法としては、dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{ __html: '<!-- comment text -->' }} /> 

dangerouslySetInnerHTMLがブラウザDOMにinnerHTMLプロパティを使用するための交換を反応させるのである使用することです。一般的に、コードからHTMLを設定するのは危険です。これは、誤ってユーザーをクロスサイトスクリプティング（XSS）攻撃にさらすことが容易なためです。したがって、ReactからHTMLを直接設定することはできますが、dangerouslySetInnerHTMLをタイプして__htmlキーを使用してオブジェクトを渡す必要があり、危険であることを思い出させる必要があります。

https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml