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

IT技术 javascript html reactjs head helmet.js
2021-04-27 09:42:20

我有一个问题，我需要在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()}
`;

谢谢你的支持

3个回答

更新

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

将为后代以及使用旧版本头盔的人保留此答案。但请注意，尽管它是投票最高的答案，但它不再是最佳答案。

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

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

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

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

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

如果我正确理解了您的问题，在您的<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"}
    ]}
/>
其它你可能感兴趣的问题
上一篇使用通过 react、redux 和 react-redux 完成的组件并在 react 应用程序中使用 webpack 构建时出错 下一篇react app中mongodb的简单连接