时间戳

首页 > 解决方案 > 如何将反应组件传递给危险的SetInnerHtml？

reactjs - 如何将反应组件传递给危险的SetInnerHtml？

问题描述

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

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

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

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

如何在其中插入一个 reactjs 组件？

标签： reactjs

解决方案

正如FrankerZ所评论的，

为什么你甚至必须这样做？<div><someReactComponent /></div>. 它使用“危险”一词是有原因的……如果必须，请避免使用它。

是的，很明显。你不应该尽可能地使用dangerouslySetInnerHTML大部分时间。

如果您尝试呈现静态标记，那么您可以使用renderToStaticMarkup. 链接的帖子还指出，但不会工作，因为它是从React实例中使用的。您需要从以下位置使用它ReactDOMServer：

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

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

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

推荐阅读