将javascript对象注入head标记

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

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

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

或者，要从字符串渲染，请执行以下操作：

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>

const scriptHtmlString=''
常量htmlstrotreactcomponent=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（）
常量属性=Object.fromEntries（[…el.attributes]
.map（（{name，value}）=>[name，value]））
返回
}
常量scriptEl=HtmlStrotResactComponent（scriptHtmlString）
//像这样使用。。。
{scriptEl}
这是对我有效的修复，将字符串包装在``：

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


{`
window.dataLayer=window.dataLayer | |[]；
函数gtag（）{dataLayer.push（参数）；}
gtag（'js'，新日期（））；
gtag（'config'，${googleAnalyticsId}）；
`}

来源：
是，但如果我从API下载此脚本并将injectionScript作为变量？我怎样才能把这个变量放进去？啊，我现在明白你的问题了。编辑了我的答案。我再次更新了问题，请检查：）
我尝试了此解决方案，但它不起作用，脚本未显示在页面上，它不在“元素”选项卡或中。但如果我使用console.log（injectScript），它会出现在console中。我刚开始反应：）
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>

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