React Helmet 将一个 javascript 对象注入到 head 标签中答案

【问题标题】：React Helmet injecting a javascript object into head tagReact Helmet 将一个 javascript 对象注入到 head 标签中
【发布时间】：2020-12-08 04:00:31
【问题描述】：

我需要注入一个从 API 下载的脚本和链接标签来标记头部。我有变量 injectionScript ，其中包含完整的标签脚本和带有链接标签的 injectionLink 。我发现 Helmet 组件接受 src、完整性等参数，但我需要注入整个标签。

            <Helmet
                script={[
                    {"src": "https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-swift.min.js",
                        "integrity": "sha512-WkVkkoB31AoI9DAk6SEEEyacH9etQXKUov4JRRuM1Y681VsTq7jYgrRw06cbP6Io7kPsKx+tLFpH/HXZSZ2YEQ==",
                    "crossOrigin": "anonymous"}
                ]}

有可能吗？我正在尝试这样的解决方案：

<Helmet script={injectionScript}>
<Helmet htmlAttributes={{script: injectionScript}}>

但对我不起作用。

EDIT：我只有变量 const injectScript = (injectionScript) 这个变量是从 API 下载的，它只在一个地方包含一个完整的标签。

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.min.js" integrity="sha512-WkVkkoB31AoI9DAk6SEEEyacH9etQXKUov4JRRuM1Y681VsTq7jYgrRw06cbP6Io7kPsKx+tLFpH/HXZSZ2YEQ==" crossorigin="anonymous"></script>

如何在 Helmet 中使用这个变量 injectScript？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以将实际的 script 元素作为 Helmet 组件的子元素，如下所示：

<Helmet>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-swift.min.js"
        integrity="sha512-WkVkkoB31AoI9DAk6SEEEyacH9etQXKUov4JRRuM1Y681VsTq7jYgrRw06cbP6Io7kPsKx+tLFpH/HXZSZ2YEQ=="
        crossOrigin="anonymous"
    />
</Helmet>

如果变量scriptAttributes中有script的属性，可以使用JSX spread syntax (...)，如下：

const scriptAttributes = {
    "src": "https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-swift.min.js",
    "integrity": "sha512-WkVkkoB31AoI9DAk6SEEEyacH9etQXKUov4JRRuM1Y681VsTq7jYgrRw06cbP6Io7kPsKx+tLFpH/HXZSZ2YEQ==",
    "crossOrigin": "anonymous",
}

<Helmet>
    <script {...scriptAttributes} />
</Helmet>

或者，从字符串渲染：

const scriptHtmlString = '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.min.js" integrity="sha512-WkVkkoB31AoI9DAk6SEEEyacH9etQXKUov4JRRuM1Y681VsTq7jYgrRw06cbP6Io7kPsKx+tLFpH/HXZSZ2YEQ==" crossorigin="anonymous"></script>'

const htmlStrToReactComponent = str => {
    const dom = new DOMParser().parseFromString(str, 'text/html')
  
    const el = dom.documentElement.querySelector(':not(html):not(head):not(body)')

    const NodeName = el.nodeName.toLowerCase()
  
    const attributes = Object.fromEntries([...el.attributes]
        .map(({ name, value }) => [name, value]))

    return <NodeName {...attributes} />
}

const scriptEl = htmlStrToReactComponent(scriptHtmlString)

// use like this...

<Helmet>
    {scriptEl}
</Helmet>

【讨论】：

是的，但是如果我从 API 下载此脚本并将 injectionScript 作为变量？如何将此变量放入？
啊，我现在明白你的问题了。编辑了我的答案。
我再次更新了问题，请检查:)
<Helmet dangerouslySetInnerHTML={{ __html: injectScript }} />
我尝试了这个解决方案，但它不起作用，脚本没有出现在页面上，它不在元素选项卡或中。但是如果我使用 console.log(injectScript) 它会出现在控制台中。我才刚刚开始使用 React :)

【解决方案2】：

这是对我有用的修复，将字符串包装在 ``:

<script>
{`
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ${googleAnalyticsId});
`}
</script>

来源：https://github.com/nfl/react-helmet/issues/334#issuecomment-413319383

【讨论】：