Question

我正在尝试使用ReactJS构建一个登录过程，并且一旦用户根据收到的响应点击其中一个注册选项（Facebook，Twitter，谷歌和不同的电子邮件视图），就需要将不同的组件呈现到视图中所以这个过程可以向前发展。我在“登录容器”中呈现了注册视图。它位于模态对话框中，我的代码是：

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>
    );
  }

}

有关如何实现这一目标的任何想法？感谢

Answer 1

根据您的状态渲染不同的布局。我建议稍后将signingForm移动到单独的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}
    );
  }
}

在ReactJS中切换视图中的组件

1 个答案: