如何使用reactjs中的按钮隐藏组件？

Question

我已经阅读了有关如何显示/隐藏组件的方法，并对它进行了一些修改，但是，我的修改不起作用。 在此处输入链接说明

我的不工作代码在这里：

 var Child = React.createClass({ render: function() { return ( <div className="container"> <p>Welcome to our website</p> <button onClick={this.onClick}>Click me to close</button> </div> ); } }); var ShowHide = React.createClass({ getInitialState: function () { return { childVisible: ture }; }, render: function() { return( <div> { this.state.childVisible ? <Child /> : null } </div> ) }, onClick: function() { this.setState({childVisible: !this.state.childVisible}); } }); React.render(<ShowHide />, document.getElementById('container')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div> 

我有两个目标：1.第一个目标是添加一个按钮以关闭此欢迎框。 2.第二个目标是向其中添加一个cookie，以便在用户首次访问此网站时向用户显示此欢迎框，一旦用户单击以将其关闭，则如果未清除该窗口，它将不会再次显示。曲奇饼。

Answer 1

您必须将onClick函数作为道具从ShowHide给Child 。

<Child onClick={this.onClick} />

然后您在“ Child的按钮将如下所示

<button onClick={this.props.onClick}>...</button>

您在initialState中也有一些错字，您写的是ture而不是true 。

Answer 2

另外，我建议您使用ES6类而不是React的createClass。 更好的性能和更标准的：D