如何将react组件传入dangerouslySetInnerHtml？

Question

假设我不能在我的源码中更改以下语句：

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

如何替换react组件的模板？像这样：

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

如何在中插入reactjs组件？

Answer 1

正如FrankerZ评论的那样，

你为什么要这么做？<div><someReactComponent /></div>。它使用“危险的”这个词...avoid是有原因的，如果你必须使用它的话。

是的，很明显。你不应该在大多数时间里使用dangerouslySetInnerHTML。

如果您正在尝试呈现静态标记，则可以使用renderToStaticMarkup。链接的帖子也声明了这一点，但它不会工作，因为它是从React实例使用的。您需要在ReactDOMServer中使用它

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

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

有关它的更多信息，请参阅docs。