有点晚了，但我决定创建我自己的@Alex Macmillan的答案后，这是通过传递两个额外的参数;放置脚本的位置，如或和设置async为true/false，这里是:

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;

调用它的方式与本文中接受的答案完全相同，但有两个额外的参数(再次):

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

解决方案视场景而定。就像在我的情况下，我必须加载一个日历嵌入在一个react组件。

Calendly查找一个div并从它的data-url属性读取，并在该div中加载iframe。

第一次加载页面时一切正常:首先，呈现带有data-url的div。然后日历脚本添加到主体。浏览器下载并评估它，我们都高兴地回家了。

问题来了，当你导航离开，然后回到页面。这一次脚本仍然在主体中，浏览器不会重新下载和重新评估它。

Fix:

在componentWillUnmount上找到并删除脚本元素。然后重新安装，重复上述步骤。 进入.getScript美元。它是一个漂亮的jquery助手，接受一个脚本URI和一个成功回调。一旦加载了脚本，它就计算它并触发你的success回调。我所要做的是在我的componentDidMount $. getscript (url)。我的渲染方法已经有日历div。它工作顺利。

你可以使用npm postscribe在react组件中加载脚本

postscribe('#mydiv', '<script src="https://use.typekit.net/foobar.js"></script>')

老实说，对于React来说，不要在头文件中添加<script>标签。这是一个痛苦的屁股得到一个回调时，他们已经完全加载。相反，使用像@charlietango/useScript这样的包在需要时加载脚本，并在脚本完成时获得状态更新。

使用示例:

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

PS.如果你使用redux来告诉其他组件你的脚本何时加载，并且像我一样使用redux-persist，不要忘记在你的redux-persist设置中包含一个修饰符，它总是在redux备份中将脚本加载的redux值设置为false。

有点晚了，但我决定创建我自己的@Alex Macmillan的答案后，这是通过传递两个额外的参数;放置脚本的位置，如或和设置async为true/false，这里是:

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;

调用它的方式与本文中接受的答案完全相同，但有两个额外的参数(再次):

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

你也可以使用反应头盔

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

Helmet接受普通HTML标记并输出普通HTML标记。这是非常简单的，React初学者友好。