Question

我正在使用react.js在html页面上呈现<script>。在这个脚本中，我需要在我的反应类中调用一个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位于呈现的脚本中。

这是否可以使用反应？如果没有，有什么工作吗？

Answer 1

是的，确实可以使用reactJS。我用这个实现了很少的滚动事件。唯一的条件是你的javascript应该在你的reactjs组件之前加载，否则会抛出未定义的错误。

但是，如果仅对此特定组件需要，则只能将其实现为组件类。

Answer 2

脚本是异步的，因此您需要等待加载和解析脚本。完成后，将触发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>

              );
         }
     }

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

2 个答案: