React JS 外部脚本加载

Question

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

主要有2个组成部分，即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);
    }

有什么想法吗？

Answer 1

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

Answer 2

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

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

我已将代码复制到此处 https://gist.github.com/kykean/29edc055e75a39bdcd329d3323f8bf0b 该示例使用 recompose 并且是 HOC 但核心思想相似。

React JS 外部脚本加载

React JS external script loading

javascript

router

reactjs