如何用另一个OnClick替换一个React组件？

Question

我有一个“注册”按钮。 单击它时，我希望它呈现一个名为“ SignUp”的新组件。 我希望新组件替换“注册”按钮。

当前，我正在使用setState，以便在单击按钮时呈现一个新组件。 但是，按钮不会被替换，“ SignUp”组件只是在按钮旁边呈现。 对我来说，用呈现的新组件替换按钮可能是个好方法？

我在下面提供了我的代码：

  export default class SignUpSignIn extends Component {

  constructor() {
     super();

     this.state = {
       clicked: false
     };

     this.handleClick = this.handleClick.bind(this);
   }

  handleClick() {
    this.setState({
      clicked: true
    });
  }

  render () {

    return (
    <div id="SignUpSignInDiv">

      <Col md="12" sm="12" xs="12" className="text-center">

        <div onClick={this.handleClick}>

          {this.state.clicked ? <SignUp /> : null}

        <Button id="SignUpButton" color="primary"> Sign Up </Button>

        </div>

       </Col>

    </div>
  )

  }
}

Answer 1

好吧，您不是有条件地渲染两个组件，而仅是SignUp 。 在state.clicked === false时， state.clicked === false在三元数中使用null ，而应显示登录按钮：

render () {
  return (
    <div id="SignUpSignInDiv">
      <Col md="12" sm="12" xs="12" className="text-center">
        {this.state.clicked ? (
          <SignUp />
        ) : (
          <Button id="SignUpButton" color="primary" onClick={this.handleClick}> Sign Up </Button>
        )}
       </Col>
    </div>
  )
}

Answer 2

一种方法是像这样，我还没有测试它，但它应该可以工作

render () {
let show = <div></div>
if(this.state.clicked){
show = <SignUp />
}
  return (
    <div id="SignUpSignInDiv">
      <Col md="12" sm="12" xs="12" className="text-center">
          {show}
          <Button id="SignUpButton" color="primary" onClick={this.handleClick}> Sign Up </Button>

       </Col>
    </div>
  )
}