ReactJS（es6）と兄弟コンポーネントを持つオープンモーダル

Question

私はNavbarコンポーネントとModalLoginコンポーネントを持つ私のアプリケーションコンポーネントを持っています。

アプリケーションコンポーネント：

class App extends React.Component { 
    render() { 
    return (
     <div> 
     <Navbar history={this.props.history} /> 
     {this.props.children} 
     <ModalLogin /> 
     </div> 
    ); 
    } 
} 

ナビゲーションバーコンポーネント

class Navbar extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = NavbarStore.getState(); 
    this.onChange = this.onChange.bind(this); 
    } 

    componentDidMount() { 
    NavbarStore.listen(this.onChange); 
    } 

    onChange(state) { 
    this.setState(state); 
    } 

    render() { 
    return (
    <nav className='navbar navbar-default navbar-static-top'> 
     <ul className='nav navbar-nav'> 
      <li><a href="#">Login</a></li> 
     </ul> 
    </nav> 
) 
} 

そしてModalLoginが反応し、ブートストラップを使用しています：

render() { 
    return (
    <div> 
     <Modal show={this.state.showModal} onHide={ModalLoginActions.close}> 
     <Modal.Header closeButton> 
     <Modal.Title>Modal heading</Modal.Title> 
     </Modal.Header> 
     <Modal.Body> 
     </Modal.Body> 
    </Modal> 
) 
} 

しかし、あなたが見ることができるように、ナビゲーションバーやモーダルで兄弟であります私のアプリ。これは正しい方法ですか？

Answer 1

親でイベントをトリガするonClickハンドラを作成します。

render() { 
    return (
    <nav className='navbar navbar-default navbar-static-top'> 
     <ul className='nav navbar-nav'> 
      <li><a href="#" onClick={this.props.onLogin}>Login</a></li> 
     </ul> 
    </nav> 
) 

showModal状態をtrueに設定するハンドラをAppコンポーネントに追加します。

<Navbar 
    history={this.props.history} 
    onLogin={() => this.setState({showModal: true})} 
/> 

ModalLoginコンポーネントにshowModalを渡します。

<ModalLogin showModal={this.state.showModal} /> 

ModalLogin内では、Modalを表示するためにpropsを使用します。

Modal show={this.props.showModal} onHide={ModalLoginActions.close}>