子类中的访问状态

Question

我试图在显示弹出div的网页上有一个按钮。弹出窗口上还有一个隐藏按钮。在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() { 
     ... 
    } 
}); 

但是，我不能从子类访问状态，并把它当作道具似乎并没有工作，要么（按值传递，而不是引用）。我应该怎么做？

Answer 1

相反父组件的访问状态直接，只是通过设置setState({visible: false})传递回调到<Popup>像onClose其中<Parent>手柄：

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() { 
     ... 
    } 
});