根据Alex McMillan的解决方案，我有如下的调整。 我自己的环境:React 16.8+，下一个v9+

//添加一个名为Script的自定义组件 / / / Script.js hook

import { useEffect } from 'react'


// react-helmet don't guarantee the scripts execution order
export default function Script(props) {

  // Ruels: alwasy use effect at the top level and from React Functions
  useEffect(() => {
    const script = document.createElement('script')

    // src, async, onload
    Object.assign(script, props)

    let { parent='body' } = props

    let parentNode = document.querySelector(parent)
    parentNode.appendChild(script)

    return () => {
      parentNode.removeChild(script)
    }
  } )

  return null  // Return null is necessary for the moment.
}

//使用自定义组件，只需导入它，并将旧的小写<script>标记替换为自定义驼色大小写<script>标记就足够了。 / / index.js

import Script from "../hooks/Script";
    
<Fragment>
  {/* Google Map */}
  <div ref={el => this.el = el} className="gmap"></div>

  {/* Old html script */}
  {/*<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>*/}

  {/* new custom Script component */}
  <Script async={false} type="text/javascript" src='http://maps.google.com/maps/api/js' />
</Fragment>

Alex Mcmillan提供的答案对我帮助最大，但对于更复杂的脚本标记不太适用。

我稍微调整了他的答案，提出了一个解决方案的长标签与各种功能，另外已经设置“src”。

(对于我的用例，脚本需要生活在头部，这是反映在这里):

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

只需在HTML文件中添加主体

<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

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

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

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

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

Fix:

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

你必须为这个脚本创建一个组件，你调用这个组件作为一个标准的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){}'}}/>
        }
    }
};

你可以试着使用下面的语句:

确保你相信剧本

 <script>{`
            function myFunction(index, row) {
                return index;
            }
        `}
</script>