在 React 中插入 HTML 注释答案

【问题标题】：Insert HTML comments in React在 React 中插入 HTML 注释
【发布时间】：2017-03-15 21:04:08
【问题描述】：

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

例如，类似：

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

将呈现给：

<!-- comment text -->

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

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

How to render a HTML comment in React?

我只想渲染一个评论节点。我注意到 React 基础架构自己呈现 HTML cmets，所以也许也有一种（有点 hacky？）的方法。

【问题讨论】：

我认为由于无法唯一标识 dom 中的评论节点，目前是不可能的。我能找到的最佳参考：groups.google.com/forum/#!topic/reactjs/y7AGHSntR8I
这个特定的答案回答了你的问题stackoverflow.com/a/41131326/4373305
@АлексейЗинкевич 谢谢！你知道这个解决方案有什么奇怪的副作用吗？

标签： javascript reactjs comments react-jsx

【解决方案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

【讨论】：

不幸的是，这需要一个包装器（在这种情况下：div），这可能不合适。 React Fragment 也不起作用，因为它们还不支持 dangerouslySetInnerHTML 属性。

【解决方案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>
        )
      }
    })

【讨论】：

不幸的是，这不适用于ReactDOMServer.renderToStaticMarkup :(