React Helmet 可以将 javascript 对象注入 <HEAD> 标记吗？答案

【问题标题】：Can React Helmet inject a javascript object into <HEAD> tag?React Helmet 可以将 javascript 对象注入 <HEAD> 标记吗？
【发布时间】：2016-06-20 12:06:21
【问题描述】：

我有一个问题，我需要在 HEAD 标签中注入一个 javascript 对象，用于标签管理。这是我的 Helmet 组件，但它只接受通过 rewind() 函数设置到元数据服务器端的特定参数。

还有没有办法使用 React Helmet 来做我需要的事情，所以，将 javascritpt 对象创建到 SCRIPT 标记中还是应该采用不同的方法？

MyComponent.js

<Helmet
    title={article.get('title')}
    meta={[
        {"property": "og:title", "content": article.get('title')},
        {"property": "og:url", "content": article.get('url')},

        {"property": "twitter:title", "content": article.get('title')}
    ]}
/>

server.js

let htmlHead = `
  ${head.title}
  ${head.meta.toString()}
`;

感谢您的支持

【问题讨论】：

标签： javascript html reactjs head helmet.js

【解决方案1】：

现有的答案已经过时。您无需使用script 属性或innerHTML 扭曲代码。您可以像往常一样在 HTML 中使用<script> 标签：

<Helmet>
  <script src="https://some.host/api.js" type="text/javascript" />
</Helmet>

【讨论】：

【解决方案2】：

更新

2017 年的这个答案适用于 react-helmet 的 v3，现在有点过时了 - 现在有更好的方法来做到这一点，直接使用脚本标签，如 newer answer 中所引用的，我会推荐代替。

将为后代以及使用旧版 Helmet 的人们保留此答案。但请注意，虽然它是投票最多的答案，但它不再是最佳答案。

我需要在 HEAD 标记中注入一个 javascript 对象

您可以在内联脚本中定义对象，使用 Helmet 的 script 属性上的 innerHTML 属性 - 该属性是在 Helmet 3.0.0 中引入的

<Helmet 
  script={[{ 
    type: 'text/javascript', 
    innerHTML: 'window.yourObject = { it: "works" }' 
  }]} 
/>

【讨论】：

【解决方案3】：

如果我正确理解了您的问题，在您的 <Helmet/> 声明中，您可以添加 script 属性以将 <script> 标记注入页面的 HTML 头部。

<Helmet
    title={article.get('title')}
    meta={[
        {"property": "og:title", "content": article.get('title')},
        {"property": "og:url", "content": article.get('url')},

        {"property": "twitter:title", "content": article.get('title')}
    ]}
    script={[
            {"src": "http://url.com/script.js", "type": "text/javascript"}
    ]}
/>

【讨论】：