在React中插入HTML注释

Question

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

例如,像:

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

会呈现给:

<!-- comment text -->

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

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

如何在React中呈现HTML注释？

我只想渲染一个注释节点.我注意到React基础架构自己呈现HTML注释,所以也许有一种(稍微有些hacky？)方式也可以.

Answer 1

另一种选择是使用危险的SetInnerHTML

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

risklySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码中设置 HTML 是有风险的，因为很容易在不经意间将用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 设置 HTML，但是你必须输入危险的 SetInnerHTML 并传递一个带有 __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>
        )
      }
    })