javascript - 如何使用react调用外部定义的javascript函数？

Question

我正在使用react.js渲染 <script>在 html 页面上。在此脚本中，我需要从我的 React 类中调用一个 JavaScript 函数。

这就是我所拥有的...

class Example extends React.Component {

    componentWillMount() { 

        //render a script 
        const script = document.createElement("script");
        script.src = "http//random_source.js";

    render(){

         //call method from the script rendered
         window.someMethod();
         return(
             <div>{this.componentWillMount}</div>

              );
         }
     }

所以componentWillMount()正在 html 页面上渲染我的脚本，并在 render() 内我打电话window.someMethod()哪里someMethod位于渲染的脚本内部。

这可以使用 react 吗？如果没有的话有什么解决办法吗？

Answer 1

脚本是异步的，因此您需要等待脚本加载和解析。完成后，onload 回调/事件将被触发

class Example extends React.Component {

    getInitialState(){
        return {loaded:false} //initially not loaded
    }

    componentWillMount() { 

        //render a script 
        const script = document.createElement("script");
        script.src = "http//random_source.js";

        //when the script loads, we're ready to go, so change state
        script.onload = (function(){ 
             this.setState({loaded: true}) 
        }).bind(this);

        //append the script to the DOM
        //you should take care not to include it twice
        // and if include to setState to loaded just as script.onload does
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    render(){
         if(!this.state.loaded){
             return (<div>Loading...</div>);
         }

         //call method from the script rendered
         window.someMethod();
         return(
             <div>{this.componentWillMount}</div>

              );
         }
     }