如何使用带有 React / Redux 的组件将 2 个模式合并为 1 个？

Question

我有一个看起来像这样的注册模式：

和一个看起来像这样的登录模式：

现在，我将它们作为 2 个独立的 React 组件从我的 NavBar 触发，如下所示：

  <Nav pullRight className="navright">
    <NavItem eventKey={3} href="#">Stuff</NavItem>
    <NavItem eventKey={4} href="#">Blog</NavItem>
    <NavItem href="#" className={this.state.signedIn ? '' : 'hidden'}>{this.state.name}</NavItem>
    <NavItem eventKey={2} href="#" className={this.state.signedIn ? 'hidden' : ''}><SignupModal/></NavItem>
    <NavItem eventKey={1} href="#" className={this.state.signedIn ? 'hidden' : ''}><LoginModal/></NavItem>
  </Nav>

我想将它们组合成一个模态组件（可能称为 AuthModal），这将加载所选的适当组件。

如果重要的话，我正在使用 react-bootstrap。我是 React 的新手，所以如果有什么不清楚的地方，请告诉我，我会澄清的。

谢谢。

Answer 1

给你个主意。

你可以这样设置。

const Modal = ({ auth }) => {
  if (auth) {
    return {
      <div>all your stuff here</div>
    }
  }
  return {
    <div>all your other stuff here</div>
  }
}

所以你像 <Modal /> 这样称呼你模态，如果你需要成为授权人，你会喜欢 <Modal auth={true} />

<Nav pullRight className="navright">
    <NavItem eventKey={3} href="#">Stuff</NavItem>
    <NavItem eventKey={4} href="#">Blog</NavItem>
    <NavItem href="#" className={this.state.signedIn ? '' : 'hidden'}>{this.state.name}</NavItem>
    <NavItem eventKey={2} href="#" className={this.state.signedIn ? <Modal /> : <Modal auth={true} />}></NavItem>
  </Nav>

希望能帮到你 ;)

如何使用带有 React / Redux 的组件将 2 个模式合并为 1 个？

How can I merge 2 modals into 1 using components with React / Redux?

reactjs

react-bootstrap

redux