Question

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

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

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

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

如何在其中插入reactjs组件？

Answer 1

根据FrankerZ的评论，

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

是的，显然。您不应该尽可能多地使用dangerouslySetInnerHTML。

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

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

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

有关更多信息，请参见docs。