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

我已阅读有关如何显示/隐藏组件的方法，并对其进行了一些修改，但是，我的修改无效。 enter link description here 如何使用reactjs中的按钮隐藏组件？

我不工作的代码是在这里：

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，以便当用户第一次访问该网站时向用户显示该欢迎框，并且一旦他们点击关闭它，如果不清楚就不会再显示cookie。

来源

2017-06-02 宗天博

您必须将onClick函数作为道具从ShowHide传递到Child。

<Child onClick={this.onClick} />

然后你在Child按钮看起来像这样

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

你也有你的初始化状态一点点错字，你写ture而不是true。

来源

2017-06-02 06:20:27 vasekhlav

谢谢！有用。 –

不客气:) – vasekhlav

作为一个额外的提示，我建议你使用ES6类而不是React的createClass。更好的性能和更多的标准：D

来源

2017-06-02 09:36:05 rolandaugusto

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

回答

相关问题