Reactの複数の関数を呼び出します。一つはコンポーネントの内側ともう一方はコンポーネントの外にありますか？

Question

子コンポーネントの状態を変更するはずのトリガーがあります。両方のレンダリングステートメントの結果は重要ではありません。私の唯一の懸念は、leftbehindをその親レンダラーAnotherに入れないでleftbehind関数を呼び出すためにtriggerトリガーを使用する方法がわかりません。

私のコードは以下の通りです。目的はレンダリングの中に入れないでleftbehindを実行させることです。

var Another = React.createClass({ 
    leftbehind: function() { 
    if (this.props.status === "dare") { 
     alert('Winning!'); 
    } 
    }, 
    render: function() { 
    if (this.props.status === "truth") { 
     return (<p>Yes</p>); 
    } else { 
     return (<p>Nope</p>); 
    } 
    } 
}); 

var App = React.createClass({ 
    getInitialState:function() { 
    return {deesfault: "truth"}; 
    }, 
    trigger: function() { 
    this.setState({deesfault: "dare"}); 
    }, 
    render: function() { 
    return (
     <div> 
     <p onClick={this.trigger}>{this.state.deesfault}</p> 
     <Another status={this.state.deesfault}/> 
     </div> 
    ); 
    } 
}); 

技術的にAPI呼び出しの場所を取ることになっているので、私は、レンダリングの内側leftbehindを配置したくない理由は、あります。レンダリング関数の中で呼び出されることは望ましくありません。

Answer 1

<Another>がレンダリングされる度にleftbehindのstatus小道具がtrueになるように実装が実行されます。つまり、statusがtrueにフリップされると、それ以降のレンダリングではfalseに反転されるまで、leftbehindが繰り返し実行されます。これは深刻な問題を引き起こすでしょう。

クリックイベントでleftbehindをトリガーすることを意図しているので、私はさまざまな方法でコンポーネントを再構成します。

• leftbehindを親コンポーネントに移動し、clickイベントとともに実行させます。 <Another>が結果を必要とする場合は、それらを小道具を介して渡します。

  var Another = React.createClass({ 
      render() { 
      return <div>{this.props.params}</div>; 
      } 
  }); 
  
  var App = React.createClass({ 
      getInitialState() { 
      return {apiRes: null}; 
      }, 
      onClick() { 
      const res = someAPICall(); 
      this.setState({apiRes: res}); 
      }, 
      render() { 
      return (
       <div> 
       <p onClick={this.onClick}>Fire</p> 
       <Another params={this.state.apiRes} /> 
       </div> 
      ); 
      } 
  }); 
  

• それとも、クリックイベントと一緒に<Another>へ<p>要素を移動します。後者において

  var Another = React.createClass({ 
      getInitialState() { 
      return {apiRes: null}; 
      }, 
      onClick() { 
      var res = someAPICall(); 
      this.setState({apiRes: res}); 
      }, 
      render() { 
      return (
       <div> 
       <p onClick={this.onClick}>Fire</p> 
       <div>{this.state.apiRes}</div> 
       </div> 
      ); 
      } 
  }); 
  
  var App = function() { return <Another />; } 
  

、キーロジックは、内部成分で処理されています。外側は単なる容器です。前者の場合、外部コンポーネントはロジックを処理し、結果があればそれを渡します。それは、どのスーツが良いかを決めるためにコンポーネントがAPI呼び出しにどのように関連しているかによって異なります。最も重要なことは、どちらの場合も、クリックイベントが発生しない限りAPIは実行されないことです。