javascript - 在 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 注释，所以或许也有一种(有点老套？)的方法来完成它。

Answer 1

另一种选择是使用 dangerouslySetInnerHTML

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

dangerouslySetInnerHTML is React's replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it's dangerous.

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