Коммутационные компоненты, представленные в ReactJS

Question

Я пытаюсь создать процесс signin с помощью ReactJS и должен визуализировать другой компонент, когда пользователь нажимает на один из параметров регистрации (facebook, twitter, google и другое представление для электронной почты) на основе полученного ответа, чтобы процесс мог двигаться вперед. Я рендеринга вид SIGNUP внутри «контейнера-входа в аккаунт», которая находится внутри модального диалога и Мой код:

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

Рендеринг разной раскладки на основе вашего состояния. Я бы предложил переместить signForm в отдельный компонент 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} 
    ); 
    } 
}