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

Question

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

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

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

options[0].optionString = "-Djava.class.path=/Library/Java/JavaVirtualMachines/jdk1.8.0_92.jdk/Contents/Home/jre/lib/server/libjvm.dylib:”;
options[1].optionString = "-Xms1024m";
options[2].optionString = "-Xmx2048m";
vm_args.version = JNI_VERSION_1_8; //JDK version. This indicates version 1.8
vm_args.nOptions = noOptions;
vm_args.options = 3;
vm_args.ignoreUnrecognized = 0;
int ret = JNI_CreateJavaVM(jvm, (void**)&env, &vm_args);

我想将它们组合成一个模态组件（可能称为 <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的新手，所以如果有什么不清楚的地方，请告诉我，我会澄清。

感谢。

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>

希望可以提供帮助;）