状态更改时重新呈现导航栏

Question

我对 react 和 JSX 还很陌生，正在寻求帮助！

我的应用程序的一部分从 redux 中提取状态以显示用户是否已登录，我只想渲染导航栏组件，因为有些东西在受保护的路由后面。一切都按我想要的方式工作，除了我必须刷新页面才能进行更改，所以我希望根据它更改时传递给它的状态来更新它，或者可能是 onclick 的一部分注销组件中的事件

这是导航栏组件

export default class Navbar extends Component {

  render() {
  
  const storeAuth = store.getState();
  const isLoggedIn = (storeAuth['auth']['isAuthenticated'])

    if(isLoggedIn){
      return (
        <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
          <Link to="/login" className="navbar-brand">CHK List</Link>
          <div className="collpase navbar-collapse">
          <ul className="navbar-nav mr-auto">
            <li className="navbar-item">
            <Link to="/list" className="nav-link">Daily Checklist </Link>
            </li>
            <li className="navbar-item">
            <Link to="/editlist" className="nav-link">Edit Checklist</Link>
            </li>
            <li className="navbar-item">
            <Link to="/Register" className="nav-link">Register New Users</Link>
            </li>
            <li className="navbar-item">
            <Link to="/Logout" className="nav-link">Logout</Link>
            </li>
          </ul>
          </div>
        </nav>
      );
    }else{
      return (
        <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
          <Link to="/dashboard" className="navbar-brand">CHK List</Link>
          <div className="collpase navbar-collapse">
          <ul className="navbar-nav mr-auto">
          
            <li className="navbar-item">
            <Link to="/login" className="nav-link">Login</Link>
            </li>
          </ul>
          </div>
        </nav>
      );
    }
  }
}

这就是 onclick 事件所在的 Logout 组件

    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 className="row">
          <div className="landing-copy col s12 center-align">
            <h4>
              <b>Hey {user.name.split(" ")[0]}</b> <p></p>
              <p className="flow-text grey-text text-darken-1">
                Are you sure you want to logout?
              </p>
            </h4>
            <button 
            style={{
                width: "150px",
                borderRadius: "3px",
                letterSpacing: "1.5px",
                marginTop: "1rem"
              }} 
              onClick={this.onLogoutClick} 
              className="btn btn-large waves-effect waves-light hoverable blue accent-3">
              Logout
            </button>
          </div>
        </div>
      </div>
    );
  }
}

Dashboard.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

Answer 1

您可以尝试使用 mapStateToProps 函数。

import {connect} from 'react-redux';



 class Navbar extends Component {

  render() {
 
  let isLoggedIn = this.props.isLoggedIn 

if(isLoggedIn){
  return (
    <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
      <Link to="/login" className="navbar-brand">CHK List</Link>
      <div className="collpase navbar-collapse">
      <ul className="navbar-nav mr-auto">
        <li className="navbar-item">
        <Link to="/list" className="nav-link">Daily Checklist </Link>
        </li>
        <li className="navbar-item">
        <Link to="/editlist" className="nav-link">Edit Checklist</Link>
        </li>
        <li className="navbar-item">
        <Link to="/Register" className="nav-link">Register New Users</Link>
        </li>
        <li className="navbar-item">
        <Link to="/Logout" className="nav-link">Logout</Link>
        </li>
      </ul>
      </div>
    </nav>
  );
}else{
  return (
    <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
      <Link to="/dashboard" className="navbar-brand">CHK List</Link>
      <div className="collpase navbar-collapse">
      <ul className="navbar-nav mr-auto">
      
        <li className="navbar-item">
        <Link to="/login" className="nav-link">Login</Link>
        </li>
      </ul>
      </div>
    </nav>
  );
}
  }
}

const mapStateToProps=(state)=>{
return {
    isLoggedIn : state.auth.isAuthenticated
}
}
 export default connect(mapStateToProps)(Navbar )