React JS 外部脚本加载答案

【问题标题】：React JS external script loadingReact JS 外部脚本加载
【发布时间】：2018-03-16 16:56:56
【问题描述】：

我正在用 React 构建一个在线画廊，它需要一个外部脚本才能正常工作。

有两个主要组件，分别是 Home.js 和 Single.js。 Home.js 显示了图像组织的一些类别，Single.js 是一个类别的详细视图（它包含特定类别下的所有照片）。路由器如下所示：

    <Provider store={ store }>
        <Router
            forceRefresh={ false }>
            <div id="router">
                <Switch>
                    <Route exact path='/' render={ () => <MainLayout><Home /></MainLayout> } />
                    <Route exact path='/about' render={ () => <MainLayout><About /></MainLayout> } />
                    <Route path='/single/:id' render={ (props) => <MainLayout><Single {...props} /></MainLayout> } />
                </Switch>
            </div>
        </Router>
    </Provider>

我正在使用此函数加载脚本“main.js”：

appendScripts() {
    const main = document.createElement('script');
    main.src = '/js/main.js';
    main.async = true;
    main.id = 'main';
    document.body.appendChild(main);
}

现在的问题是脚本加载到 Home.js 组件上，但它不会加载到 Single.js 组件上，只有当我第二次通过主页访问它时（对于同一类别），即使它附加在 DOM 中。通过 Single.js 访问主页也是如此。如果 Single.js 先加载，我需要通过 Single.js 访问 Home.js 2 次，脚本才能正常加载。

这两个组件都具有以下功能：

    componentDidMount() {
        this.appendScripts();
    }

    componentWillMount() {
        this.props.getImages(this.state.id);
        this.props.getCategory(this.state.id);
    }

有什么想法吗？

【问题讨论】：

希望了解情况。您是否考虑过“导入”文件而不是附加文件？
其实我没有。我现在就试着做，然后带着结果返回这里。

标签： javascript reactjs router

【解决方案1】：

我有一个与您类似的用例，它是按需加载 Google 的 Recaptcha。确保在渲染访问外部脚本的组件之前加载脚本的关键思想。这是一个简单的例子

创建一个名为 loading 的状态
componentDidMount，追加脚本标签，设置onload回调，设置src。
脚本加载时调用 onload 到 setState({ loading: false })
进行条件渲染 { !loading && <MyCompUseExternalScript/>}

我在这里复制了代码https://gist.github.com/kykean/29edc055e75a39bdcd329d3323f8bf0b 该示例使用了 recompose，是一个 HOC，但核心思想是相似的。

【讨论】：

【解决方案2】：

我的猜测是，由于 ReactRouter 实际上并没有刷新页面，因此脚本正在被缓存并且只是第二次呈现而没有运行。我会将脚本放入一个函数中，然后在其他地方调用它，可能在componentDidMount 中，或者至少注册一个侦听器以了解脚本何时加载并运行它。

【讨论】：