使用 ReactJS (es6) 和兄弟组件打开模式

【问题标题】：Open modal with ReactJS (es6) and siblings components使用 ReactJS (es6) 和兄弟组件打开模式
【发布时间】：2017-02-09 23:51:55
【问题描述】：

我的应用程序组件带有一个导航栏组件和一个 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 使用 react-bootstrap：

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

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

【问题讨论】：

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