使用ReactJS（es6）和同级组件打开模式

我的应用程序组件有一个导航栏组件和一个ModalIn组件

应用程序组件：

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

类应用程序扩展了React.Component{
render（）{
返回(
{this.props.children}
);
}
}

导航栏组件

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>
  )
 }

类导航栏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state=NavbarStore.getState（）；
this.onChange=this.onChange.bind（this）；
}
componentDidMount（）{
NavbarStore.listen（this.onChange）；
}
onChange（州）{
本.设置状态（状态）；
}
render（）{
返回(



)
}

ModalLogin使用react引导：

 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>
  )
}

render（）{
返回(
模态标题
)
}

---

但正如您所看到的，Navbar和Modal在我的应用程序中是兄弟。这是正确的方法吗？

编写一个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>
  )

---

编写一个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>
  )

---

看起来没问题。你有什么问题吗？是的！

应该有一些触发模式显示的onClick，但不知道如何启动！看起来没问题。你有什么问题吗？是的！

应该有一些触发模式显示的onClick，但不知道如何启动！但他们的父应用程序是应用程序。它正确吗？或者我应该从那里处理它吗？如果登录al仅从NavBar触发，将其放在NavBar组件中。否则将其移动到App。但它们的父级是App。是否正确，或者我应该从那里处理它？如果LoginModule仅从NavBar触发，将其放在NavBar组件中。否则将其移动到App。

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

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