javascript - 延迟 react 组件加载，直到加载 Helm 头部脚本

Question

我有一个依赖于 google maps js api 的 React 组件。这是用脚本标签导入到 App.js 页面的头部。当我尝试加载包含此组件的页面时，它失败了，声称脚本未加载。但是，如果我先打开一个不同的页面(这会导致加载脚本，但不包含该组件)，然后导航到包含该组件的页面，它就可以正常工作。

这向我暗示问题是组件加载时脚本尚未加载。不过，我认为页面加载应该在获取脚本时阻塞。我不太确定如何解决这个问题。

应用程序.js:

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Helmet>
            <script
              type="text/javascript"
              src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSn_vNbNZzrcFxl8bV3MH1j0kuoLVsOCQ&libraries=places"
            />
          </Helmet>

          <div className="pageContent">
                <Route exact path="/foo" component={FooScreen} />
                <Route exact path="/bar" component={BarScreen} /
          </div>
        </div>
      </Router>
    );
  }
}
export default App;

在上面，FooScreen 包含该组件，而 BarScreen 没有。如果我直接打开 FooScreen，它会失败，如果我打开 BarScreen，然后导航到 FooScreen，它会工作。

Answer 1

通常事件监听器应该附加到脚本元素实例，例如promise-based script loader .

这种情况特定于 Google map 或其他具有异步初始化例程并接受回调的脚本，因此监听 load 事件是多余的:

  state = { mapLoaded: false };

  componentDidMount() {
    window.onGoogleMap = () => this.setState({ mapLoaded: true });
  }

  componentWillUnmount() {
    delete window.onGoogleMap;
  }

  render() {
    return <>
      <Helmet>
        <script
          type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=...&libraries=places&callback=onGoogleMap"
        />
      </Helmet>

      {!this.state.mapLoaded ? (
        'Loading...'
      ) : (
        <Router>...</Router>
      )}
    </>;
  }

由于使用了全局变量，这只需要同时存在一个 App 实例，包括测试。