reactjsのボタンを使ってコンポーネントを隠すには？

Question

コンポーネントを表示/非表示する方法を読んだことがありますが、いくつか変更を加えましたが、変更が機能していません。 enter link description here

私の働いていないコードはここにある： 1.最初の目標は、このウェルカムボックスを閉じるには、ボタンを追加することです：私は2つの目標を持って

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>

。 2. 2番目の目標は、このウェルカムボックスを初めてこのウェブサイトにアクセスしたときにユーザーに表示するためにクッキーを追加し、クリックして閉じるとクリックしないと再び表示されない場合にクッキーを追加することですクッキー

Answer 1

ShowHideからChildまでの小道具としてonClick関数を渡す必要があります。

<Child onClick={this.onClick} /> 

はその後Childに、ボタンがこの

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

のようになります。また、あなたはture代わりのtrueを書いて、あなたの初期状態ではほとんどのタイプミスを持っています。

Answer 2

さらにヒントとして、ReactのcreateClassの代わりにES6クラスを使用することをお勧めします。パフォーマンスの向上と標準化：D