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

Question

我有一个注册模式，如下所示：

和一个登录模式，如下所示：

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

  <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 /> ，如果您需要成为身份验证者，则可以像<Modal auth={true} />一样进行<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>

希望能有所帮助;）