子クラスでの状態へのアクセス

Question

私はポップアップdivを表示するWebページにボタンを表示しようとしています。ポップアップには、それを隠すクローズボタンもあります。 reactjsでこれを行う適切な方法は何ですか？私の考えは、ポップアップがそれを変更している間、ポップアップの可視性をトグルする状態をボタン上に持つことです。

var Parent = React.createClass({ 
    getInitialState: function() { 
     return {visible: false}; 
    }, 
    buttonOnClick: function() { 
     if(this.state.visible == true) 
      this.setState({visible: false}); 
     else 
      this.setState({visible: true}); 
    }, 
    render: function() { 
     var elem; 
     if(this.state.visible) 
      elem = <Popup/> 
     else 
      elem = ""; 
     ... 
     {elem} 
    } 
} 

var Popup = React.createClass({ 
    closeButtonOnClick: function() { 
     this.setState({visible: false}); //this.state is null! 
    } 
    render: function() { 
     ... 
    } 
}); 

しかし、私は子クラスから状態にアクセスすることはできませんし、小道具としてそれを渡すと、どちらか（参照しない、値渡し）動作するようには思えません。私はこれをどのようにするべきですか？代わりに、直接、ちょうどsetState({visible: false})を設定することにより、onClose<Parent>ハンドルのよう<Popup>へのコールバックを渡す親コンポーネント上の状態にアクセスする

Answer 1

：私が見るああ

var Parent = React.createClass({ 
    getInitialState: function() { 
     return {visible: false}; 
    }, 
    buttonOnClick: function() { 
     if(this.state.visible == true) 
      this.setState({visible: false}); 
     else 
      this.setState({visible: true}); 
    }, 
    handlePopupClose: function() { 
     this.setState({visible: false}); 
    }, 
    render: function() { 
     var elem; 
     if(this.state.visible) 
      elem = <Popup onClose={this.handlePopupClose}/> 
     else 
      elem = ""; 
     ... 
     {elem} 
    } 
} 

var Popup = React.createClass({ 
    closeButtonOnClick: function() { 
     this.props.onClose(); 
    } 
    render: function() { 
     ... 
    } 
});