大佬教程收集整理的这篇文章主要介绍了JavaScript将脚本标签添加到React / JSX，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决JavaScript将脚本标签添加到React / JSX？

编辑：事情变化很快，这已经过时了-查看更新

您是否想在每次渲染此组件时一次或一次将该组件安装到DOM中时一次又一次地获取并执行脚本？

也许尝试这样的事情：

componentDIDMount () {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.Js";
    script.async = true;

    document.body.appendChild(script);
}

但是，这仅在要加载的脚本不能作为模块/软件包提供时才真正有用。首先，我将始终：

• 在Npm上寻找包裹
• 在我的专案中下载并安装套件（npm install typekit）
• import我需要的包装（import Typekit from 'typekit';）

这可能是您安装软件包的方式react以及react-document-title您的示例，并且npm上有一个Typekit软件包。

更新：

现在我们有了钩子，更好的方法可能是这样使用useEffect：

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://use.typekit.net/foobar.Js";
  script.async = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
}, []);

这使其成为自定义钩子的理想选择（例如：）hooks/useScript.Js：

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, [url]);
};

export default useScript;

可以这样使用：

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.Js');

  // rest of your component
}

解决方法

'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 (
            <Documenttitle title="People">
                <article className={[prefix('people'),prefix('people','index')].join(' ')}>
                    <h1 className="tk-brandon-grotesque">People</h1>

                    <script src="https://use.typekit.net/foobar.js"></script>
                    <script dangerouslySeTinnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(E){}'}}></script>
                </article>
            </Documenttitle>
        );
    }
};

<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(E){}</script>

大佬总结

以上是大佬教程为你收集整理的JavaScript将脚本标签添加到React / JSX全部内容，希望文章能够帮你解决JavaScript将脚本标签添加到React / JSX所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。