15

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

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

我的组件.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')}
    ]}
/>

服务器.js

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

谢谢你的支持

4

3 回答 3

17

更新

这个 2017 年的答案适用于 react-helmet 的 v3，现在有点过时了 - 现在有一种更好的方法可以做到这一点，直接使用脚本标签，如更新的答案中所引用的，我建议这样做。

将为后代和旧版本头盔的人们保留这个答案。但请注意，尽管它是投票最多的答案，但它不再是最佳答案。

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

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

<Helmet 
  script={[{ 
    type: 'text/javascript', 
    innerHTML: 'window.yourObject = { it: "works" }' 
  }]} 
/>
于 2017-07-20T15:15:13.170 回答
17

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

<Helmet>
  <script src="https://some.host/api.js" type="text/javascript" />
</Helmet>
于 2020-06-24T18:57:33.623 回答
12

如果我正确理解了您的问题，则在您的<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"}
    ]}
/>
于 2016-08-28T08:40:22.127 回答