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>
        )
      }
    })

在React中插入HTML注释

2 个答案: