在React中插入HTML注释

Question

有没有办法在React JSX中插入HTML注释节点，就像插入组件或DOM节点一样？

例如，类似于：

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

会呈现给：

<!-- comment text -->

这个想法是评论在页面上可见，所以{ /* this /* }不回答我的问题。

请注意，以下相关问题没有答案，并要求有些不同的东西：

How to render a HTML comment in React?

我只想渲染一个注释节点。我注意到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>
        )
      }
    })