javascript - 单击更新状态变量以显示不同的组件

Question

我是 React 新手，尝试根据状态变量加载不同的组件。我希望我的处理程序动态地知道我正在更新哪个状态变量。截至目前，我明确将州名称作为字符串传递。

状态变量

state = {
        showLogin: false,
        showHome: false
    }

处理程序方法

handleShow = (element) => this.setState({ element: true });

按钮

{
  !this.props.isAuthenticated ? (
    <Button
      variant="outline-primary"
      onClick={() => this.handleShow("showLogin")}
    >
      Login
    </Button>
  ) : (
    <>
      <Button
        variant="outline-primary"
        onClick={() => this.handleShow("showHome")}
      >
        Home
      </Button>
      <Button variant="outline-primary" onClick={this.authorizeUserMethod}>
        LogOut
      </Button>
    </>
  );
}

Answer 1

试试这个

handleShow = element => this.setState({
    ...this.state, 
    [element]: true
});