logo标签列表

React Helmet可以将一个JavaScript对象注入到<head>标签中吗？

javascripthtmlreactjsheadhelmet.js
24

我有一个问题，我需要将一个Javascript对象注入到HEAD标签中，用于标签管理目的。

这是我的Helmet组件，但它只接受特定的参数通过rewind()函数来设置metadata服务器端。

是否仍然有一种方法可以使用React Helmet来实现我需要的功能，即创建JavaScript对象并将其放入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()}
`;

感谢您的支持

4个回答
24

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

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

更新

这篇2017年的回答适用于react-helmet的v3版本，现在已经有了更好的方法，可以直接使用脚本标签来实现，可以参考新的回答，我建议您使用这种方法。

为了纪念和方便老版本的Helmet用户，我们将保留此回答。但请注意，尽管它是最高投票的答案，但它不再是最佳答案。

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

您可以在内联脚本中定义该对象，在Helmet的script属性上使用innerHTML属性——这个属性在Helmet 3.0.0中被引入。

<Helmet 
  script={[{ 
    type: 'text/javascript', 
    innerHTML: 'window.yourObject = { it: "works" }' 
  }]} 
/>
如果您有一个JSON对象，可以像这样使用。<Helmet script={[{ type: 'text/javascript', innerHTML: JSON.stringify( { it: "works" } ) }]} /> - nick
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"}
    ]}
/>
4
只需按以下方式添加脚本标签：

<Helmet>
    <script type="text/javascript">
        {`console.log("Hello World");window.secret = "Tss..."`}
    </script>
</Helmet>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接