Javascript 将登录文本按钮更改为注销，反之亦然 我正处在学习反应的中间。我有一个使用JWT、passport和Redux的身份验证程序。我正在使用引导程序制作导航栏，其中包含徽标、注册按钮和登录按钮。当用户成功登录时，我不理解将登录文本按钮更改为注销文本，反之亦然。以下是我在Dashboard.js中的代码： class Dashboard extends Component { onLogoutClick = e => { e.preventDefault(); this.props.logoutUser(); }; render() { const { user } = this.props.auth; return ( <div style={{ height: "75vh" }} className="container valign-wrapper"> <div style={{ marginTop: "4rem" }} className="row"> <div className="landing-copy col s12 center-align"> <h4> <b>Hey there,</b> {user.name} <br /> <br /> <p className="flow-text grey-text text-darken-1"> You are logged in! </p> </h4> <button style={{ width: "150px", borderRadius: "3px", letterSpacing: "1.5px", marginTop: "1rem" }} onClick={this.onLogoutClick} className="btn btn-danger" > Logout </button> </div> </div> </div> ); } } Dashboard.propTypes = { logoutUser: PropTypes.func.isRequired, auth: PropTypes.object.isRequired }; const mapStateToProps = state => ({ auth: state.auth }); export default connect(mapStateToProps, { logoutUser })(Dashboard); 类仪表板扩展组件{ onLogoutClick=e=>{ e、 预防默认值（）； this.props.logoutUser（）； }; render（）{ const{user}=this.props.auth； 返回( 嘿，{user.name} 您已登录！ 注销 ); } } Dashboard.propTypes={ 注销用户：需要PropTypes.func.isRequired， auth:PropTypes.object.isRequired }; 常量mapStateToProps=状态=>({ auth:state.auth }); 导出默认连接（MapStateTops，{logoutUser}）（仪表板）；

以及Navbar.js代码：

class Navbar extends Component {
  render() {
    return (
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <Link
          to="/"
          style={{
            fontFamily: "monospace"
          }}
          className="navbar-brand"
        >
          REAVOTE
        </Link>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav mr-auto"></ul>
          <div class="form-inline my-2 my-lg-0">
            <Link
              to="/register"
              style={{
                width: "140px",
                borderRadius: "3px",
                letterSpacing: "1.5px"
              }}
              className="btn btn-primary"
            >
              Register
            </Link>
            &ensp;
            <Link
              to="/login"
              style={{
                width: "140px",
                borderRadius: "3px",
                letterSpacing: "1.5px"
              }}
              className="btn btn-danger"
            >
              Log In
            </Link>
          </div>
        </div>
      </nav>
    );
  }
}

export default Navbar;

类导航栏扩展组件{
render（）{
返回(
重新投票

登记
&ensp；
登录
);
}
}
导出默认导航栏；

因为您从reducer（mapStateToProps）带来了身份验证状态； 并将其添加到onClick属性中，以针对每种情况应用两个函数：

onClick = {
  this.props.auth.user ? (this.handleLogout) : (this.handleLogin)
}

onLoginClick = (e) => {
  e.preventDefault()
  this.props.logoutUser()
}

onLogoutClick = (e) => {
  e.preventDefault()
  this.props.loginUser()
}

为了可读性和复制/粘贴/共享等，最好直接共享代码，而不是jpg文件

如果要更改按钮文本，请在按钮文本区域执行相同的验证检查：

<button style= {{width: "150px", borderRadius: "3px", letterSpacing: "1.5px", marginTop: "1rem"}}
    onClick= {this.onLogoutClick}
    className="btn btn-danger" > {this.props.auth.user ? "Logout": "Login"}
</button>

{this.props.auth.user？“注销”：“登录”}

在按钮标签内，您可以有

{user？“Logout”：“Login”}

。但是，

onClick

功能应首先检查用户是否登录，然后执行相应的操作。请不要将代码作为图像发布。这完全没有道理。你能从我开始的地方向我解释一下细节吗？首先，通过直接编写代码来分享你的代码，我的意思是复制粘贴到你的问题中，而不是使用图像。这对我来说是否验证了“你的问题中的代码比你的解释多”？所以我不能发布我的帖子否，我的意思是这里的惯例是不与图片共享代码，这是没有用的。已经用代码更改了图片。请查收