子コンポーネント内の関数を呼び出すと反応します

Question

親コンポーネントから子コンポーネントに格納されている関数を呼び出そうとしています。しかし、それをすることはできません。親から子へのフォームであれば、単にコンポーネントの小道具を使うことができますが、親から子への操作方法はわかりません。

このように、下の例のように、親クラスのボタンは、子クラスの表示機能をトリガーする必要があります。

var Parent = React.createClass ({ 
    render() { 
     <Button onClick={child.display} ?> 
    } 
}) 


var Child = React.createClass ({ 
    getInitialState() { 
     return { 
      display: true 
     }; 
    }, 


    display: function(){ 
     this.setState({ 
      display: !this.state.display 
     }) 
    }, 

    render() { 
    {this.state.display} 
    } 
}) 

Answer 1

これを達成する最も簡単な方法は、refsを使用することです。

var Parent = React.createClass ({ 

    triggerChildDisplay: function() { 
     this.refs.child.display(); 
    }, 

    render() { 
     <Button onClick={this.triggerChildDisplay} /> 
    } 
}) 


var Child = React.createClass ({ 
    getInitialState() { 
     return { 
      display: true 
     }; 
    }, 


    display: function(){ 
     this.setState({ 
      display: !this.state.display 
     }) 
    }, 

    render() { 
    {this.state.display} 
    } 
}) 

私は基本的に、あなたの例ではコピーされたが、あなたの親で、私はあなたが子コンポーネントをレンダリング表示されていないが、一般的に、あなたが希望し、その子供にあなたがそれをREFを与えることに注意してください<Child ref="child" />のようになります。

Answer 2

親コンポーネントから子関数を呼び出すことはできません。

この場合、この結果を得るためのより良い方法があります。それは、子コンポーネントの 'display'プロパティを、親によって渡された小道具の値に設定することです。

var Parent = React.createClass ({ 
    getInitialState() { 
     return {displayChild: false}; 
    }, 

    toggleChildDisplay() { 
     this.setState({ 
      displayChild: !this.state.displayChild 
     }); 
    }, 

    render() { 
     <Button onClick={this.toggleChildDisplay} /> 
     <Child display={this.state.displayChild} /> 
    } 
}); 

var Child = React.createClass ({ 
    render: function() { 
     if (this.props.display) { 
      /*return component*/ 
     } else { 
      /*Don't render*/ 
     } 
    } 
});