兄弟コンポーネントを表示するreactJs

Question

私は反応の世界では新しいので、兄弟コンポーネントのコンポーネントを表示します。私のトーストコンポーネントで

import Toast from './components/Toast/Toast' 
class App extends Component { 
    constructor(){ 
     super(); 
     this.state = { 
      showToast:false 
     }; 
    } 
    render() { 
    return (
     <div id="cont"> 
      <Toast showToast={this.state.showToast}/> 
      <Header /> 
     </div> 

    ); 
    } 
} 

： 私は親コンポーネントを持つ

class Toast extends Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     const showToast = this.props.showToast; 

     let toast = null; 
     if (showToast) { 
      toast = <div className="visible">Toast Ok</div>; 
     }else{ 
      toast = null; 
     } 

     return (
      <div> 
      {toast} 
      </div> 
     ); 
     } 
} 

export default Toast; 

そして、私のヘッダー・コンポーネントに私が持っている：私はボタンをクリックしたのであれば、私は状態を設定します

class Header extends Component { 
    render() { 
     return (
     <button> // With click, show toastComponents so setState parent </button> 
     ) 
    } 

を私のコンポーネントを表示するためのキーshowToast。

Answer 1

コンポーネントを<Header>コンポーネントに渡して、ボタンをクリックしたときに呼び出すことができます。

let showToast =() => this.setState({ showToast: true }); 
// ... 
<Toast showToast={this.state.showToast}/> 
<Header onClick={showToast}> 

その後、すべてを行う必要がある<Header>内部のクリックハンドラに至るまで、この小道具を渡すです。

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