HTML脚本在React组件加载后加载

洪昱

2023-03-14

问题内容：

我的index.html

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="google-signin-client_id" content= "my_client_id.apps.googleusercontent.com">

        <meta name="google-signin-scope" content="profile email">
        <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
        <script>
            function start() {
                console.log('script running')
                gapi.load('auth2', function() {
                    auth2 = gapi.auth2.init({
                        client_id: 'my_client_id.apps.googleusercontent.com',
                        scope: 'profile email'
                    });
                });
            }
        </script>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>


  </body>
</html>

在该start()函数中，我打印到控制台以查看其运行时间。

当我加载页面时，经常start()会在 react组件之后加载。

    componentDidMount() {
        console.log(gapi.auth2.getAuthInstance())
    }

在调试器中，您可以看到脚本正在组件之后加载

如果我刷新页面几次，则可以正常工作。但是有时它起作用，有时却不起作用。

为什么？

问题答案：

我认为在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语法。

HTML脚本在React组件加载后加载

相关阅读

相关文章

相关问答

相关工具

相关文档