反応を使用して外部で定義されたjavascript関数を呼び出す方法は？

Question

私はreact.jsを使用して、<script>をHTMLページに表示しています。このスクリプト内には、私の反応クラス内から呼び出す必要があるjavascript関数があります。

これは私が持っているものですが...だからcomponentWillMount()

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> 

      ); 
     } 
    } 

は、HTMLページに私のスクリプトをレンダリングしている、と render()以内に私は someMethodがレンダリングスクリプト内に配置され window.someMethod()を呼んでいます。

これは反応を使用して可能ですか？そうでない場合は回避策がありますか？

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> 

      ); 
     } 
    } 

Answer 2

はい、これは実際にはreactJSを使用して可能です。私はこれを使っていくつかのスクロールイベントを実装しています。唯一の条件は、あなたのjavascriptがあなたのreactjsコンポーネントの前にロードされるべきで、それ以外の未定義のエラーがスローされるということです。

しかし、これがこの特定のコンポーネントに対してのみ必要な場合は、コンポーネントクラスのみを実装できます。