我认为在 React 中加载脚本的最佳方法是使用容器组件。这是一个非常简单的组件，它允许您编写用于在组件而不是 index.html 中导入脚本的逻辑。您还需要在检查 componentDidMount 后通过调用 loadScript 来确保不会多次包含脚本。

这是改编自：https : //www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/

像这样的东西。. .

  componentDidMount() {
    if (!window.google) {
      this.loadMapScript();
    }
    else if (!window.google.maps) {
      this.loadMapScript();
    }
    else {
      this.setState({ apiLoaded: true })
    }
  }

  loadMapScript() {
    // Load the google maps api script when the component is mounted.

    loadScript('https://maps.googleapis.com/maps/api/js?key=YOUR_KEY')
      .then((script) => {
        // Grab the script object in case it is ever needed.
        this.mapScript = script;
        this.setState({ apiLoaded: true });
      })
      .catch((err: Error) => {
        console.error(err.message);
      });
  }

  render() {
    return (
      <div className={this.props.className}>
        {this.state.apiLoaded ? (
          <Map
            zoom={10}
            position={{ lat: 43.0795, lng: -75.7507 }}
          />
        ) : (
          <LoadingCircle />
        )}
      </div>
    );
  }

然后在一个单独的文件中：

const loadScript = (url) => new Promise((resolve, reject) => {
  let ready = false;
  if (!document) {
    reject(new Error('Document was not defined'));
  }
  const tag = document.getElementsByTagName('script')[0];
  const script = document.createElement('script');

  script.type = 'text/javascript';
  script.src = url;
  script.async = true;
  script.onreadystatechange = () => {
    if (!ready && (!this.readyState || this.readyState === 'complete')) {
      ready = true;
      resolve(script);
    }
  };
  script.onload = script.onreadystatechange;

  script.onerror = (msg) => {
    console.log(msg);
    reject(new Error('Error loading script.'));
  };

  script.onabort = (msg) => {
    console.log(msg);
    reject(new Error('Script loading aboirted.'));
  };

  if (tag.parentNode != null) {
    tag.parentNode.insertBefore(script, tag);
  }
});


export default loadScript;

我知道这很多，但是当我第一次这样做时，当我发现有一种（相当）简单的方法可以在任何react组件中包含任何脚本时，我感到很欣慰。

编辑：其中一些我只是复制粘贴，但如果您不使用 create-react-app，您可能需要替换一些 ES6 语法。

我的建议：

将您的 google API 脚本标签更改为此，您可以在其中删除async和defer

<script src="https://apis.google.com/js/client:platform.js"></script>

去掉你的 start 函数，它现在可以console.log正常运行，但是第二位代码会导致同样的问题，因为它也会异步运行。

修改您的react代码，以便componentWillMount调用该函数的内容：

componentWillMount() {
  gapi.load('auth2', () => {
    auth2 = gapi.auth2.init({
      client_id: 'urhaxorid.apps.googleusercontent.com',
      scope: 'profile email',
      onLoad: () => {
        this.setState({ mapLoaded: true });
      }
    });
  });
}

componentDidMount() {
  if (this.state.mapLoaded) {
    console.log(gapi.auth2.getAuthInstance());
  }
}

请记住，我不知道onLoadgoogle apis 是什么，我也不是 100% 确定如何最好地做这些setState东西，但这可能是一个起点。