React JS 外部脚本加载 [英] React JS external script loading

问题描述

我正在用 React 构建一个在线图库，它需要一个外部脚本才能正常工作.

有两个主要组件，即 Home.js 和 Single.js.Home.js 显示图像组织的一些类别，Single.js 是一个类别的详细视图(它包含特定类别下的所有照片).路由器看起来像这样:

 <路由器forceRefresh={假}><div id="路由器"><开关><路由精确路径='/' render={() =><MainLayout><Home/></MainLayout>}/><路由精确路径='/about' render={ () =><MainLayout><关于/></MainLayout>}/><Route path='/single/:id' render={ (props) =><MainLayout><单个{...props}/></MainLayout>}/></开关>

</路由器></提供者>

我正在使用此函数加载脚本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);}

有什么想法吗?

解决方案

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

1. 创建一个名为 loading 的状态
2. componentDidMount，附加script标签，设置onload回调，设置src.
3. 当脚本加载时，它调用 onload 到 setState({ loading: false })
4. 进行条件渲染 { !loading &&}

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

I'm building an online gallery in React, and it requires an external script in order to work properly.

There are 2 main components, namely Home.js and Single.js. Home.js displays some categories the images are organized in, and the Single.js is the detail view of a category (it contains all the photos under a specific category). The Router looks like this:

    <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> 

I am loading the script 'main.js' using this function:

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

Now the thing is that the script loads on the Home.js component, but it won't load on the Single.js component only the second time I access it through the home page (for the same category), even though it is appended in the DOM. And the same thing goes for accessing the home page through Single.js. If Single.js loads first, I need to access the Home.js 2 times through the Single.js for the script to load properly.

The components both have these functions called:

    componentDidMount() {
        this.appendScripts();
    }

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

Any thoughts?

解决方案

I have a similar use case as yours, it is on demand loading of Google's Recaptcha. The key idea to ensure script is loaded before rendering components which access the external script. Here is a simple example

1. create a state named loading
2. componentDidMount, append the script tag, set onload callback, and set src.
3. when script loaded it calls onload to setState({ loading: false })
4. do conditional rendering { !loading && <MyCompUseExternalScript/>}

i've copied the code here https://gist.github.com/kykean/29edc055e75a39bdcd329d3323f8bf0b The example uses recompose and is a HOC but the core idea is similar.

这篇关于React JS 外部脚本加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！