如何将react组件传递给危险地设置InnerHtml？

Question

假设我无法在源代码中更改此语句：

<div dangerouslySetInnerHTML={{ __html: template }} />  

如何替换React组件的模板？ 喜欢：

<div dangerouslySetInnerHTML={{ __html: someReactComponent }} />  

如何在中插入reactjs组件？

Answer 1

正如FrankerZ所说 ，

您为什么还要这样做？ <div><someReactComponent /></div> 。 为什么使用“危险”一词是有原因的...如果需要，请避免使用它。

是的，显然。 您不应该在大多数时间都尽可能地dangerouslySetInnerHTML地使用dangerouslySetInnerHTML 。

如果您尝试呈现静态标记，则可以使用renderToStaticMarkup 。 链接的帖子还指出，但由于在React实例中被使用而无法正常工作。 您需要从ReactDOMServer使用它：

import ReactDOMServer from 'react-dom/server';
ReactDOMServer.renderToStaticMarkup(statticElement)

这不会创建React内部使用的额外DOM属性，例如data-reactroot。 如果您想将React用作简单的静态页面生成器，这将很有用，因为去除多余的属性可以节省一些字节。

有关更多信息，请参阅文档 。