blocks|key|4445353|text|我为这个特定的案例创建了一个React组件：https://github.com/coreyleelarson/react-typekit|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4445354|只需将您的Typekit+Kit+ID作为道具传入即可。|4445355|import+React+from+'react';
import+Typekit+from+'react-typekit';

const+HtmlLayout+=+()+=>+(
++<html>
++++<body>
++++++<h1>My+Example+React+Component</h1>
++++++<Typekit+kitId="abc123"+/>
++++</body>
++</html>
);

export+default+HtmlLayout;|code-block|syntax|javascript|4445356|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/coreyleelarson/react-typekit^0|M|1B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>I created a React component for this specific case: <a href="https://github.com/coreyleelarson/react-typekit" rel="noreferrer">https://github.com/coreyleelarson/react-typekit</a></p>

<p>Just need to pass in your Typekit Kit ID as a prop and you're good to go.</p>

<pre><code>import React from 'react';
import Typekit from 'react-typekit';

const HtmlLayout = () =&gt; (
  &lt;html&gt;
    &lt;body&gt;
      &lt;h1&gt;My Example React Component&lt;/h1&gt;
      &lt;Typekit kitId="abc123" /&gt;
    &lt;/body&gt;
  &lt;/html&gt;
);

export default HtmlLayout;
</code></pre>


blocks|key|4445397|text|根据上面的答案，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4445398|import+React+from+'react';

export+default+class+Test+extends+React.Component+{
++constructor(props)+{
++++super(props);
++}

++componentDidMount()+{
++++const+s+=+document.createElement('script');
++++s.type+=+'text/javascript';
++++s.async+=+true;
++++s.innerHTML+=+"document.write('This+is+output+by+document.write()!')";
++++this.instance.appendChild(s);
++}

++render()+{
++++return+<div+ref={el+=>+(this.instance+=+el)}+/>;
++}
}|code-block|syntax|javascript|4445399|div被绑定到this，脚本被注入其中。|offset|length|style|CODE|4445400|演示可在codesandbox.io上找到|4445401|entityMap|0|LINK|mutability|MUTABLE|url|https://codesandbox.io/s/mZwGpB3XA^0|0|0|7|4|0|4|E|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>Further to the answers above you can do this:</p>

<pre><code>import React from 'react';

export default class Test extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.innerHTML = "document.write('This is output by document.write()!')";
    this.instance.appendChild(s);
  }

  render() {
    return &lt;div ref={el =&gt; (this.instance = el)} /&gt;;
  }
}
</code></pre>

<p>The div is bound to <code>this</code> and the script is injected into it.</p>

<p>Demo can be found on <a href="https://codesandbox.io/s/mZwGpB3XA" rel="noreferrer">codesandbox.io</a></p>


blocks|key|4445662|text|Alex+Mcmillan提供的答案对我帮助最大，但对于更复杂的脚本标记却不是很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4445663|我稍微调整了他的答案，为一个具有各种功能的长标签提出了一个解决方案，这个标签已经另外设置了"src“。|4445664|(对于我的用例，脚本需要存在于head中，这里也反映了这一点)：|4445665|++componentWillMount+()+{
++++++const+script+=+document.createElement("script");

++++++const+scriptText+=+document.createTextNode("complex+script+with+functions+i.e.+everything+that+would+go+inside+the+script+tags");

++++++script.appendChild(scriptText);
++++++document.head.appendChild(script);
++}|code-block|syntax|javascript|4445666|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1136527/alex-mcmillan^0|0|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>The answer <a href="https://stackoverflow.com/users/1136527/alex-mcmillan">Alex Mcmillan</a> provided helped me the most but didn't quite work for a more complex script tag. </p>

<p>I slightly tweaked his answer to come up with a solution for a long tag with various functions that was additionally already setting "src". </p>

<p>(For my use case the script needed to live in head which is reflected here as well):</p>

<pre><code>  componentWillMount () {
      const script = document.createElement("script");

      const scriptText = document.createTextNode("complex script with functions i.e. everything that would go inside the script tags");

      script.appendChild(scriptText);
      document.head.appendChild(script);
  }
</code></pre>


blocks|key|4445528|text|我最喜欢的方式是使用React+Helmet+-它是一个组件，允许以您可能已经习惯的方式轻松地操作文档头。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4445529|例如：|4445530|import+React+from+"react";
import+{Helmet}+from+"react-helmet";

class+Application+extends+React.Component+{
++render+()+{
++++return+(
++++++++<div+className="application">
++++++++++++<Helmet>
++++++++++++++++<script+src="https://use.typekit.net/foobar.js"></script>
++++++++++++++++<script>try{Typekit.load({+async:+true+});}catch(e){}</script>
++++++++++++</Helmet>
++++++++++++...
++++++++</div>
++++);
++}
};|code-block|syntax|javascript|4445531|https://github.com/nfl/react-helmet|offset|length|4445532|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|Z|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<p>My favorite way is to use React Helmet – it's a component that allows for easy manipulation of the document head in a way you're probably already used to. </p>

<p>e.g.</p>

<pre><code>import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        &lt;div className="application"&gt;
            &lt;Helmet&gt;
                &lt;script src="https://use.typekit.net/foobar.js"&gt;&lt;/script&gt;
                &lt;script&gt;try{Typekit.load({ async: true });}catch(e){}&lt;/script&gt;
            &lt;/Helmet&gt;
            ...
        &lt;/div&gt;
    );
  }
};
</code></pre>

<p><a href="https://github.com/nfl/react-helmet" rel="noreferrer">https://github.com/nfl/react-helmet</a></p>


blocks|key|4445585|text|如果您需要在SSR+(服务器端呈现)中使用<script>块，则使用componentDidMount的方法将不起作用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4445586|您可以改用react-safe库。React中的代码为：|4445587|import+Safe+from+"react-safe"

//+in+render+
<Safe.script+src="https://use.typekit.net/foobar.js"></Safe.script>
<Safe.script>{
++`try{Typekit.load({+async:+true+});}catch(e){}`
}
</Safe.script>|code-block|syntax|javascript|4445588|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/react-safe^0|L|8|Y|H|0|5|A|5|A|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>If you need to have <code>&lt;script&gt;</code> block in SSR (server-side rendering), an approach with <code>componentDidMount</code> will not work.</p>

<p>You can use <a href="https://www.npmjs.com/package/react-safe" rel="noreferrer"><code>react-safe</code></a> library instead.
The code in React will be:</p>

<pre><code>import Safe from "react-safe"

// in render 
&lt;Safe.script src="https://use.typekit.net/foobar.js"&gt;&lt;/Safe.script&gt;
&lt;Safe.script&gt;{
  `try{Typekit.load({ async: true });}catch(e){}`
}
&lt;/Safe.script&gt;
</code></pre>


blocks|key|4445641|text|使用Range.createContextualFragment有一个非常好的解决方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4445642|/**
+*+Like+React's+dangerouslySetInnerHTML,+but+also+with+JS+evaluation.
+*+Usage:
+*+++<div+ref={setDangerousHtml.bind(null,+html)}/>
+*/
function+setDangerousHtml(html,+el)+{
++++if(el+===+null)+return;
++++const+range+=+document.createRange();
++++range.selectNodeContents(el);
++++range.deleteContents();
++++el.appendChild(range.createContextualFragment(html));
}|code-block|syntax|javascript|4445643|这适用于任意的超文本标记语言，并且还保留了上下文信息，如document.currentScript。|4445644|entityMap^0|2|U|0|0|S|M|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>There is a very nice workaround using <code>Range.createContextualFragment</code>.</p>

<pre><code>/**
 * Like React's dangerouslySetInnerHTML, but also with JS evaluation.
 * Usage:
 *   &lt;div ref={setDangerousHtml.bind(null, html)}/&gt;
 */
function setDangerousHtml(html, el) {
    if(el === null) return;
    const range = document.createRange();
    range.selectNodeContents(el);
    range.deleteContents();
    el.appendChild(range.createContextualFragment(html));
}
</code></pre>

<p>This works for arbitrary HTML and also retains context information such as <code>document.currentScript</code>.</p>


blocks|key|4445950|text|您可以使用npm+postscribe在react组件中加载脚本|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4445951|postscribe('#mydiv',+'<script+src="https://use.typekit.net/foobar.js"></script>')|code-block|syntax|javascript|4445952|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/postscribe^0|5|E|5|E|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>You can use <a href="https://www.npmjs.com/package/postscribe" rel="noreferrer"><code>npm postscribe</code></a> to load script in react component</p>

<pre><code>postscribe('#mydiv', '&lt;script src="https://use.typekit.net/foobar.js"&gt;&lt;/script&gt;')
</code></pre>


blocks|key|4445967|text|对于多个脚本，请使用以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4445968|var+loadScript+=+function(src)+{
++var+tag+=+document.createElement('script');
++tag.async+=+false;
++tag.src+=+src;
++document.getElementsByTagName('body').appendChild(tag);
}
loadScript('//cdnjs.com/some/library.js')
loadScript('//cdnjs.com/some/other/library.js')|code-block|syntax|javascript|4445969|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>for multiple scripts, use this</p>

<pre><code>var loadScript = function(src) {
  var tag = document.createElement('script');
  tag.async = false;
  tag.src = src;
  document.getElementsByTagName('body').appendChild(tag);
}
loadScript('//cdnjs.com/some/library.js')
loadScript('//cdnjs.com/some/other/library.js')
</code></pre>


blocks|key|4445702|text|componentDidMount()+{
++const+head+=+document.querySelector("head");
++const+script+=+document.createElement("script");
++script.setAttribute(
++++"src",
++++"https://assets.calendly.com/assets/external/widget.js"
++);
++head.appendChild(script);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4445703|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>componentDidMount() {
  const head = document.querySelector("head");
  const script = document.createElement("script");
  script.setAttribute(
    "src",
    "https://assets.calendly.com/assets/external/widget.js"
  );
  head.appendChild(script);
}
</code></pre>


blocks|key|4445764|text|聚会有点晚了，但在查看了@Alex+Macmillan之后，我决定创建自己的答案，这是通过传递两个额外的参数；放置脚本的位置，如或，并将异步设置为true/false，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4445765|import+{+useEffect+}+from+'react';

const+useScript+=+(url,+position,+async)+=>+{
++useEffect(()+=>+{
++++const+placement+=+document.querySelector(position);
++++const+script+=+document.createElement('script');

++++script.src+=+url;
++++script.async+=+typeof+async+===+'undefined'+?+true+:+async;

++++placement.appendChild(script);

++++return+()+=>+{
++++++placement.removeChild(script);
++++};
++},+[url]);
};

export+default+useScript;|code-block|syntax|javascript|4445766|调用它的方法与本文接受的答案中显示的完全相同，但有两个额外的(再次)参数：|4445767|//+First+string+is+your+URL
//+Second+string+can+be+head+or+body
//+Third+parameter+is+true+or+false.
useScript("string",+"string",+bool);|4445768|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>A bit late to the party but I decided to create my own one after looking at @Alex Macmillan answers and that was by passing two extra parameters; the position in which to place the scripts such as  or  and setting up the async to true/false, here it is:</p>

<pre><code>import { useEffect } from 'react';

const useScript = (url, position, async) =&gt; {
  useEffect(() =&gt; {
    const placement = document.querySelector(position);
    const script = document.createElement('script');

    script.src = url;
    script.async = typeof async === 'undefined' ? true : async;

    placement.appendChild(script);

    return () =&gt; {
      placement.removeChild(script);
    };
  }, [url]);
};

export default useScript;
</code></pre>

<p>The way to call it is exactly the same as shown in the accepted answer of this post but with two extra(again) parameters:</p>

<pre><code>// First string is your URL
// Second string can be head or body
// Third parameter is true or false.
useScript("string", "string", bool);
</code></pre>


blocks|key|4446047|text|你也可以使用反应头盔。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4446048|import+React+from+"react";
import+{Helmet}+from+"react-helmet";

class+Application+extends+React.Component+{
++render+()+{
++++return+(
++++++++<div+className="application">
++++++++++++<Helmet>
++++++++++++++++<meta+charSet="utf-8"+/>
++++++++++++++++<title>My+Title</title>
++++++++++++++++<link+rel="canonical"+href="http://example.com/example"+/>
++++++++++++++++<script+src="/path/to/resource.js"+type="text/javascript"+/>
++++++++++++</Helmet>
++++++++++++...
++++++++</div>
++++);
++}
};|code-block|syntax|javascript|4446049|Helmet接受普通的HTML标签并输出普通的HTML标签。它非常简单，对初学者也很友好。|4446050|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can also use react helmet</p>

<pre><code>import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        &lt;div className="application"&gt;
            &lt;Helmet&gt;
                &lt;meta charSet="utf-8" /&gt;
                &lt;title&gt;My Title&lt;/title&gt;
                &lt;link rel="canonical" href="http://example.com/example" /&gt;
                &lt;script src="/path/to/resource.js" type="text/javascript" /&gt;
            &lt;/Helmet&gt;
            ...
        &lt;/div&gt;
    );
  }
};
</code></pre>

<p>Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.</p>


blocks|key|4445850|text|要在head标签<head>中添加脚本标签或代码，请使用react-helmet+package。它很轻便，并且有很好的文档。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4445851|要在body内的script标签中添加Js代码，|4445852|++++function+htmlDecode(html)+{
++++++return+html.replace(/&([a-z]%2B);/ig,+(match,+entity)+=>+{
++++++++const+entities+=+{+amp:+'&',+apos:+'\'',+gt:+'>',+lt:+'<',+nbsp:+'\xa0',+quot:+'"'+};
++++++++entity+=+entity.toLowerCase();
++++++++if+(entities.hasOwnProperty(entity))+{
++++++++++return+entities[entity];
++++++++}
++++++++return+match;
++++++});
++++}
++render()+{
++++const+scriptCode+=+`<script+type="text/javascript">
++++++++++{(function()+{
++++++++++window.hello={
++++++++++++FIRST_NAME:+'firstName',
++++++++++++LAST_NAME:+'lastName',
++++++++++};
++++++++++})()}
++++++++++</script>`
++++return(
++++++<div+dangerouslySetInnerHTML={{+__html:+this.htmlDecode(scriptCode)+}}+/>;
++++);
++}|code-block|syntax|javascript|4445853|这段代码可以通过console.log(windows.hello)进行测试|4445854|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/nfl/react-helmet^0|8|6|S|K|0|0|0|0|8|Q|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>To add script tag or code in head tag <code>&lt;head&gt;</code>, use <a href="https://github.com/nfl/react-helmet" rel="nofollow noreferrer">react-helmet package</a>. it is light and have good documentation.</p>
<p>To add Js code in script tag inside body,</p>
<pre><code>    function htmlDecode(html) {
      return html.replace(/&amp;([a-z]+);/ig, (match, entity) =&gt; {
        const entities = { amp: '&amp;', apos: '\'', gt: '&gt;', lt: '&lt;', nbsp: '\xa0', quot: '&quot;' };
        entity = entity.toLowerCase();
        if (entities.hasOwnProperty(entity)) {
          return entities[entity];
        }
        return match;
      });
    }
  render() {
    const scriptCode = `&lt;script type=&quot;text/javascript&quot;&gt;
          {(function() {
          window.hello={
            FIRST_NAME: 'firstName',
            LAST_NAME: 'lastName',
          };
          })()}
          &lt;/script&gt;`
    return(
      &lt;div dangerouslySetInnerHTML={{ __html: this.htmlDecode(scriptCode) }} /&gt;;
    );
  }

</code></pre>
<p>this code can be tested by <code>console.log(windows.hello)</code></p>


blocks|key|4446089|text|只需在html文件中添加正文即可|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4446090|<script+src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"+crossorigin></script>|code-block|syntax|javascript|4446091|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>just add in body in html file</p>
<pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;https://unpkg.com/react-dom@17/umd/react-dom.development.js&quot; crossorigin&gt;&lt;/script&gt;
</code></pre>


blocks|key|4446101|text|您可以在调用react之前将脚本放入Html文件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4446102|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You can put your script in an Html file before react is being called.</p>


blocks|key|4446164|text|老实说，对于React+--不需要费心在头文件中添加<script>标签。这是一个痛苦的臀部，以获得一个回调时，他们已经装满。相反，可以使用像@charlietango/useScript这样的包在需要时加载脚本，并在脚本完成时获得状态更新。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4446165|示例用法：|4446166|import+React+from+'react'
import+useScript,+{+ScriptStatus+}+from+'@charlietango/use-script'
+
const+Component+=+()+=>+{
++const+[ready,+status]+=+useScript('https://api.google.com/api.js')
+
++if+(status+===+ScriptStatus.ERROR)+{
++++return+<div>Failed+to+load+Google+API</div>
++}
+
++return+<div>Google+API+Ready:+{ready}</div>
}
+
export+default+Component|code-block|syntax|javascript|4446167|PS。如果你使用redux告诉其他组件你的脚本已经加载，并且像我一样使用redux-persist，不要忘记在你的redux-persist设置中包括一个修饰符，它总是在redux备份中将脚本加载的redux值设置为false。|4446168|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/@charlietango/use-script^0|Q|8|1Z|N|0|0|0|0|10|D|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>Honestly, for React - don't bother with messing around adding <code>&lt;script&gt;</code> tags to your header. It's a pain in the ass to get a callback when they have loaded fully. Instead, use a package like <a href="https://www.npmjs.com/package/@charlietango/use-script" rel="nofollow noreferrer">@charlietango/useScript</a> to load the script when you need it and get a status update when it is completed.</p>
<p>Example usage:</p>
<pre class="lang-js prettyprint-override"><code>import React from 'react'
import useScript, { ScriptStatus } from '@charlietango/use-script'
 
const Component = () =&gt; {
  const [ready, status] = useScript('https://api.google.com/api.js')
 
  if (status === ScriptStatus.ERROR) {
    return &lt;div&gt;Failed to load Google API&lt;/div&gt;
  }
 
  return &lt;div&gt;Google API Ready: {ready}&lt;/div&gt;
}
 
export default Component
</code></pre>
<p>PS. If you're using redux to tell other components when your script has loaded, and are using <code>redux-persist</code> like I was, don't forget to include a modifier on your redux-persist setup that always sets the script loaded redux value to false in the redux backup.</p>


blocks|key|4445962|text|我看到了同样的问题，直到我发现了这个包，非常容易实现，我希望它能像我一样工作:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4445963|https://github.com/gumgum/react-script-tag|offset|length|4445964|import+React+from+'react';
import+Script+from+'@gumgum/react-script-tag';

import+'./App.css';

function+App()+{
++return+(
++++<div+>

++++++<h1>+Graphs</h1>
++++++<div+class="flourish-embed+flourish-network"+data-src="visualisation/8262420">
++++++++<Script++src"your+script"
++++++++</Script>
++++++</div>
++++</div>
++);
}

export+default+App;|code-block|syntax|javascript|4445965|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|16|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>I saw the same problem, until I found this  package, quite easy to implement, I hope it works as it worked for me :)</p>
<p><a href="https://github.com/gumgum/react-script-tag" rel="nofollow noreferrer">https://github.com/gumgum/react-script-tag</a></p>
<pre><code>import React from 'react';
import Script from '@gumgum/react-script-tag';

import './App.css';

function App() {
  return (
    &lt;div &gt;

      &lt;h1&gt; Graphs&lt;/h1&gt;
      &lt;div class=&quot;flourish-embed flourish-network&quot; data-src=&quot;visualisation/8262420&quot;&gt;
        &lt;Script  src&quot;your script&quot;
        &lt;/Script&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>


blocks|key|4446015|text|我最近遇到了这个问题，尝试了这里给出的多种解决方案，最后尝试了iframe，如果您尝试在特定屏幕上集成js插件，Iframe似乎可以无缝工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4446016|​|4446017|++++<iframe
++++++id="xxx"
++++++title="xxx"
++++++width="xxx"
++++++height="xxx"
++++++frameBorder="value"
++++++allowTransparency
++++++srcDoc={`
++++++++++<!doctype+html>
++++++++++<html>
++++++++++<head>
++++++++++++++<title>Chat+bot</title>
++++++++++++++<meta+charset="utf-8">
++++++++++++++<meta+name="viewport"+content="width=device-width">
++++++++++</head>
++++++++++<body+style="width:100%25">
++++++++++++++<script+type="text/javascript">+
++++++++++++++++......
++++++++++++++++++++++++++++</script>++
++++++++++</body>
++++++++++</html>
++++++++++`}
+/>|code-block|syntax|javascript|4446018|4446019|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>I recently faced the issue,
Tried multiple solutions given here, at last sattled with iframe,
Iframe seems to work seamlessly if it  you are trying to integrate a js plugin on a specific screen</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;iframe
      id="xxx"
      title="xxx"
      width="xxx"
      height="xxx"
      frameBorder="value"
      allowTransparency
      srcDoc={`
          &lt;!doctype html&gt;
          &lt;html&gt;
          &lt;head&gt;
              &lt;title&gt;Chat bot&lt;/title&gt;
              &lt;meta charset="utf-8"&gt;
              &lt;meta name="viewport" content="width=device-width"&gt;
          &lt;/head&gt;
          &lt;body style="width:100%"&gt;
              &lt;script type="text/javascript"&gt; 
                ......
                            &lt;/script&gt;  
          &lt;/body&gt;
          &lt;/html&gt;
          `}
 /&gt;</code></pre>
</div>
</div>
</p>


<p>I have a relatively straightforward issue of trying to add inline scripting to a React component. What I have so far:</p>
<pre><code>'use strict';

import '../../styles/pages/people.scss';

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';

import { prefix } from '../../core/util';

export default class extends Component {
    render() {
        return (
            &lt;DocumentTitle title=&quot;People&quot;&gt;
                &lt;article className={[prefix('people'), prefix('people', 'index')].join(' ')}&gt;
                    &lt;h1 className=&quot;tk-brandon-grotesque&quot;&gt;People&lt;/h1&gt;
                    
                    &lt;script src=&quot;https://use.typekit.net/foobar.js&quot;&gt;&lt;/script&gt;
                    &lt;script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}&gt;&lt;/script&gt;
                &lt;/article&gt;
            &lt;/DocumentTitle&gt;
        );
    }
};
</code></pre>
<p>I have also tried:</p>
<pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;https://use.typekit.net/foobar.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;try{Typekit.load({ async: true });}catch(e){}&lt;/script&gt;
</code></pre>
<p>Neither approach seems to execute the desired script. I'm guessing it's a simple thing I'm missing. Can anybody help out?</p>
<p>PS: Ignore the foobar, I have a real id actually in use that I didn't feel like sharing.</p>


Adding script tag to React/JSX

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个相对简单的问题，就是尝试向React组件添加内联脚本。到目前为止，我所拥有的：'use strict';import '../../styles/pages/people.scss';import React, { Component } from 'react';import DocumentTitle fr...

问向React/JSX添加脚本标记
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向React/JSX添加脚本标记EN