reactjs - React Helmet injecting a javascript object into head tag - Stack Overflow

admin管理员组

文章数量:1336660

I need to inject into to head tag a script and link tag which are downloaded from API. I have variable injectionScript which contains the full tag script and injectionLink with link tag. I found that Helmet ponent accept parameters like src, integrity etc but I need to inject a whole tag.

            <Helmet
                script={[
                    {"src": ".21.0/ponents/prism-swift.min.js",
                        "integrity": "sha512-WkVkkoB31AoI9DAk6SEEEyacH9etQXKUov4JRRuM1Y681VsTq7jYgrRw06cbP6Io7kPsKx+tLFpH/HXZSZ2YEQ==",
                    "crossOrigin": "anonymous"}
                ]}

It is possible? I'm trying solutions like this:

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

But doesn't work for me.

EDIT: I have only variable const injectScript = (injectionScript) This variable is downloaded from API and it just includes a whole tag in one place.

<script src=".21.0/prism.min.js" integrity="sha512-WkVkkoB31AoI9DAk6SEEEyacH9etQXKUov4JRRuM1Y681VsTq7jYgrRw06cbP6Io7kPsKx+tLFpH/HXZSZ2YEQ==" crossorigin="anonymous"></script>

How to use this variable injectScript in Helmet?

I need to inject into to head tag a script and link tag which are downloaded from API. I have variable injectionScript which contains the full tag script and injectionLink with link tag. I found that Helmet ponent accept parameters like src, integrity etc but I need to inject a whole tag.

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

It is possible? I'm trying solutions like this:

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

But doesn't work for me.

EDIT: I have only variable const injectScript = (injectionScript) This variable is downloaded from API and it just includes a whole tag in one place.

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

How to use this variable injectScript in Helmet?

• javascript
• reactjs

Share Improve this question Follow edited Sep 9, 2020 at 20:34 Hubu999 asked Sep 9, 2020 at 19:55 Hubu999Hubu999 8322 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can just have the actual script element as a child of the Helmet ponent, like this:

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

If you have the attributes of script in a variable scriptAttributes, you can use the JSX spread syntax (...) as follows:

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

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

Or, to render from a string:

const scriptHtmlString = '<script src="https://cdnjs.cloudflare./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>

This was the fix that worked for me, wrapping the string in ``:

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

Source: https://github./nfl/react-helmet/issues/334#issuement-413319383

本文标签： reactjsReact Helmet injecting a javascript object into head tagStack Overflow