在React中插入HTML注釋

Question

有沒有辦法在React JSX中插入HTML注釋節點，就像插入組件或DOM節點一樣？

例如，像：

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

會呈現給：

<!-- comment text -->

這個想法是評論在頁面上可見，所以{ /* this /* }不回答我的問題。

請注意，以下相關問題沒有答案，並要求有些不同的東西：

如何在React中呈現HTML注釋？

我只想渲染一個注釋節點。 我注意到React基礎架構自己呈現HTML注釋，所以也許有一種（稍微有些hacky？）方式也可以。

Answer 1

另一種方法是使用dangerouslySetInnerHTML

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

dangerouslySetInnerHTML是React在瀏覽器DOM中使用innerHTML的替代品。 通常，從代碼設置HTML是有風險的，因為很容易無意中將您的用戶暴露給跨站點腳本（XSS）攻擊。 因此，您可以直接從React設置HTML，但是您必須鍵入dangerouslySetInnerHTML並使用__html鍵傳遞對象，以提醒自己這很危險。

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

Answer 2

我唯一能想到的就是操作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>
        )
      }
    })