Question

我有一个依赖于Google Maps js API的react组件。这是通过脚本标记导入到App.js页面的开头的。当我尝试加载包含该组件的页面时，它失败，声称未加载脚本。但是，如果我先打开另一个页面（这会导致脚本加载，但不包括此组件），然后导航到包含该组件的页面，则它将起作用。

这向我建议，问题是在加载组件时尚未加载脚本。我认为，尽管如此，页面加载应该在获取脚本时阻止。我不太确定如何解决此问题。

App.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 Maps或具有异步初始化例程并接受回调的其他脚本，因此侦听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个实例（包括测试）。

延迟反应组件的加载，直到头盔头盔脚本加载

1 个答案: