Javascript 在ReactJS中切换视图中的组件

我正在尝试使用ReactJS构建一个登录流程，一旦用户根据收到的响应单击其中一个注册选项（facebook、twitter、google和电子邮件的不同视图），我需要在视图中呈现一个不同的组件，以便该流程能够向前推进。我正在模式对话框中的“登录容器”中呈现注册视图，我的代码是：

class SignIn extends React.Component {

  constructor() {
      super();
      this.state = {showSignin: false};
      this.state = {showSignup: false};
  } 

  openSignin() {
      this.setState({showSignin: true});
  }

  closeSignin() {
      this.setState({showSignin: false});
  }

  openSignup() {
      this.setState({showSignup: true});
  }

  closeSignup() {
      this.setState({showSignup: false});
  }

  render() {
    return(
      <div>
        <Button className="signin-btn" bsStyle='primary' onClick={this.openSignin.bind(this)}>Sign in</Button>
        <Button bsStyle='default' onClick={this.openSignup.bind(this)}>Sign up</Button>

        <ModalDialog heading="Sign in" show={this.state.showSignin}>
          <div className="signin-container">
            <SigninHome />
          </div>
          <Button className="modal-close-button" onClick={this.closeSignin.bind(this)}>
            <i className="fa fa-times"></i>
          </Button>
          <p><a href="#">Signup with Email</a></p>
        </ModalDialog>

        <ModalDialog heading="Sign in" show={this.state.showSignup}>
          <p>Body</p>
          <Button bsStyle='primary' onClick={this.closeSignup.bind(this)}>Close</Button>
        </ModalDialog>
      </div>   
    );
  }
}

class SigninHome extends React.Component {

  render() {
    return(
      <div className="signin-home">
        <Button bsStyle='primary' className="social-signin-btn fb"><i className="fa fa-facebook"></i> Sign in with Facebook</Button>
        <Button bsStyle='primary' className="social-signin-btn twitter"><i className="fa fa-twitter"></i> Sign in with Twitter</Button>
        <Button bsStyle='primary' className="social-signin-btn google"><i className="fa fa-google"></i> Sign in with Google</Button>
      </div>
    );
  }

}

类签名扩展了React.Component{
构造函数（）{
超级（）；
this.state={showSignin:false}；
this.state={showSignup:false}；
} 
openSignin（）{
this.setState（{showSignin:true}）；
}
closeSignin（）{
this.setState（{showSignin:false}）；
}
openSignup（）{
this.setState（{showSignup:true}）；
}
特写{
this.setState（{showSignup:false}）；
}
render（）{
返回(
登录
注册

身体

接近
);
}
}
类SigninHome扩展了React.Component{
render（）{
返回(
使用Facebook登录
使用Twitter登录
使用谷歌登录
);
}
}

---

关于如何实现这一点有什么想法吗？谢谢

根据您的状态呈现不同的布局。我建议以后将签到表移动到单独的React组件中：

class SignIn extends React.Component {

  constructor() {
      super();
      this.state = {showSignin: false};
  } 

  openSignin() {
      this.setState({showSignin: true});
  }

  closeSignin() {
      this.setState({showSignin: false});
  }

  render() {
   var signinDialog = this.state.showSignin ? <ModalDialog heading="Sign in" show={this.state.showSignup}>
              <p>Body</p>
              <Button bsStyle='primary' onClick={this.closeSignup.bind(this)}>Close</Button>
            </ModalDialog> : '';

  return(
      <div>
        <Button className="signin-btn" bsStyle='primary' onClick={this.openSignin.bind(this)}>Sign in</Button>
        <Button bsStyle='default' onClick={this.openSignup.bind(this)}>Sign up</Button>
      </div>
      {signinDialog}
    );
  }
}

类签名扩展了React.Component{
构造函数（）{
超级（）；
this.state={showSignin:false}；
} 
openSignin（）{
this.setState（{showSignin:true}）；
}
closeSignin（）{
this.setState（{showSignin:false}）；
}
render（）{
var SIGNDIALOG=this.state.showSignin？
身体

接近
: '';
返回(
登录
注册
{signinDialog}
);
}
}

只需使用其他组件重新加载即可。是否可以给出一个示例？我对ReactJS完全是新手，也不是JS专业人士。感谢您不应该直接操纵

状态

，为了绑定初始状态，请使用钩子。@mfeineis在使用Babel和ES2015语法时，构造函数中的这个.state={}与getInitialState钩子相同，ok不知道-neet:-）