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

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

});

Answer 2

在您的处理程序方法中，您必须使用扩展运算符，这允许您创建状态的克隆，从而连接一个新值。

处理方法

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