在 React 中插入没有元素容器的 HTML 片段答案

【问题标题】：Inserting HTML fragments without an element container in React在 React 中插入没有元素容器的 HTML 片段
【发布时间】：2017-02-23 05:26:22
【问题描述】：

我们的 React 应用使用通用渲染。页面的 html/body/head 元素是使用 React 组件在服务器端生成的。通常，我们可以通过 JSX 在我们的 <head> 中创建像 <script> 和 <link> 元素这样的东西。不幸的是，一旦我们开始需要插入第三方 HTML 片段，事情就变得棘手了。这些片段本质上是一个类似'<script src="some/url.js"></script><link rel="stylesheet" href="/some/css">' 的字符串。通常，可以通过dangerouslySetInnerHTML 将HTML 片段注入到某个元素容器中，但是对于HTML 文档的<head>，没有容器元素。这迫使我们要么：

解析 HTML 片段（并非易事）并将它们转换为 React 元素
放弃 JSX 并将我们所有的头部内容构建为一个大的串联/模板化字符串

React 有没有办法将 HTML 片段注入到文档中没有容器元素？

【问题讨论】：

它们必须进入头部吗？
这是个好问题；我知道链接通常在头脑中。近年来这种情况发生了变化吗？
我不认为链接是正式的犹太洁食，但我已经在正文中完成了样式标签以加载外部 css。也可以只使用 vanilla js 服务器端来做到这一点。
您可能对github.com/nfl/react-helmet感兴趣
@Jacob 如果您不想在网站呈现之前加载它们，它们就会进入头部。如果您不想在第一次渲染后加载它们，它们会放在主体的末尾。因此，脚本经常进入正文。 stackoverflow.com/questions/196702/…

标签： reactjs

【解决方案1】：

我认为React Helmet 在组件级别设置<head> 和Interweave 在不使用dangerouslySetInnerHTML 的情况下注入/解析HTML 的组合可以实现您正在寻找的东西？

【讨论】：

Interweave 看起来确实支持这种场景，它的Markup 组件可以包装在一个片段中。看起来该选项于 2018 年 4 月推出。