我试图编辑@Alex McMillan接受的答案，但它不让我，所以这里有一个单独的答案，你可以得到你加载的库的值。这是人们要求的非常重要的区别，也是我用stripe.js实现时需要的区别。

useScript.js

import { useState, useEffect } from 'react'

export const useScript = (url, name) => {

  const [lib, setLib] = useState({})

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

    script.src = url
    script.async = true
    script.onload = () => setLib({ [name]: window[name] })

    document.body.appendChild(script)

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

  return lib

}

用法是这样的

const PaymentCard = (props) => {
  const { Stripe } = useScript('https://js.stripe.com/v2/', 'Stripe')
}

注意:将库保存在一个对象中，因为通常情况下库是一个函数，React会在存储状态时执行函数来检查更改——这将破坏库(如Stripe)，期望用特定的参数调用——所以我们将其存储在一个对象中，以隐藏React并保护库函数不被调用。

对于多个脚本，使用这个

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

你必须为这个脚本创建一个组件，你调用这个组件作为一个标准的ES6脚本标记

'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>
                </article>
            </DocumentTitle>
        );

        class Component extend Index.App {  
             <script src="https://use.typekit.net/foobar.js" />
             <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}/>
        }
    }
};

你也可以使用反应头盔

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初学者友好。

以下是我如何最终能够在React JS代码中添加两个外部JavaScript文件:

以下是我遵循的步骤。

步骤1: 我在react-app文件夹路径中使用npm I React-Helmet从终端安装了React-Helmet。

步骤2: 然后我添加了import {Helmet} from "react-helmet";头在我的代码。

步骤3: 最后，在我的代码中这是 我如何使用Helment添加外部JS文件

<Helmet>
    <script src = "path/to/my/js/file1.js" type = "text/javascript" />
    <script src = "path/to/my/js/file2.js" type = "text/javascript" />  
</Helmet>

除了上面的答案，你还可以这样做:

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

div被绑定到此，脚本被注入其中。

演示可以在codesandbox.io上找到