将javascript对象注入head标记

Question

我需要注入到头部标签的脚本和链接标签，这是从API下载的。我有变量injectionScript，它包含完整的标记脚本和带有链接标记的injectionLink。我发现头盔组件接受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}}>

但对我不起作用。

编辑：我只有变量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>

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

Answer 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>

如果变量script中有scriptAttributes的属性，则可以使用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>

Answer 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