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

Question

I have a signup modal that looks like:

and a login modal that looks like:

Right now, I have them as 2 separate React Components triggered from my NavBar as follows:

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

I'd like to combine them into one modal component (potentially called AuthModal ) and that'll load the appropriate component that is selected.

I am using react-bootstrap if that matters. I'm new to React, so if something is unclear, please let me know and I'll clarify.

Thanks.

Answer 1

Gonna give you an idea.

You can setup it this way.

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

So you call you modal like <Modal /> and if you need to be the auth one you do like <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>

Hope that can help ;)