Question

我在这里面临的问题是用户体验问题，当我执行if use isAuthenticated时将显示AuthLinks，如果未通过身份验证则将显示GuestLinks。响应时，用户无法单击汉堡包按钮，并且无法弹出边栏。

const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
  useEffect(() => {
    var elem = document.querySelector(".sidenav");
    var instance = M.Sidenav.init(elem, {
      edge: "left",
      inDuration: 250
    });
  }, []);

两个包含Navbar jsx的变量这是AuthLinks

const authLinks = (

    <Fragment>
      <nav>
        <div className="nav-wrapper blue-grey darken-4">
          <div className="container">
            <Link to="/" className="brand-logo">
              WebDev
            </Link>
            <a to="#" data-target="mobile-demo" className="sidenav-trigger">
              <i className="material-icons">menu</i>
            </a>
            <ul className="right hide-on-med-and-down">
              <li>
                <Link onClick={logout} to="/">
                  Logout
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <ul className="sidenav blue-grey darken-4" id="mobile-demo">
        <li>
          <Link onClick={logout} to="/">
            Logout
          </Link>
        </li>
      </ul>
    </Fragment>
  );

这里是GuestLinks，几乎就是一样，只是链接到不同的路线


const guestLinks = (
    <Fragment>
      <nav>
        <div className="nav-wrapper blue-grey darken-4">
          <div className="container">
            <Link to="/" className="brand-logo">
              WebDev
            </Link>
            <a to="#" data-target="mobile-demo" className="sidenav-trigger">
              <i className="material-icons">menu</i>
            </a>
            <ul className="right hide-on-med-and-down">
              <li>
                <Link to="!#">Developers</Link>
              </li>
              <li>
                <Link to="/register">Register</Link>
              </li>
              <li>
                <Link to="/login">Login</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <ul className="sidenav blue-grey darken-4" id="mobile-demo">
        <li>
          <Link to="!#">Developers</Link>
        </li>
        <li>
          <Link to="/register">Register</Link>
        </li>
        <li>
          <Link to="/login">Login</Link>
        </li>
      </ul>
    </Fragment>
  );

if else语句

return (
    <div>
      {!loading && (
        <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
      )}
    </div>
  );
Navbar.prototype = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps, { logout })(Navbar);

Answer 1

我找到了解决方案。首先，我为GuestLinks创建另一个组件

const Navbarguest = () => {
  useEffect(() => {
    var elem = document.querySelector(".sidenav");
    var instance = M.Sidenav.init(elem, {
      edge: "left",
      inDuration: 250
    });
  }, []);
  return (
    <div>
      <nav>
        <div className="nav-wrapper blue-grey darken-4">
          <div className="container">
            <Link to="/" className="brand-logo">
              WebDev
            </Link>
            <a to="#" data-target="mobile-demo" className="sidenav-trigger">
              <i className="material-icons">menu</i>
            </a>
            <ul className="right hide-on-med-and-down">
              <li>
                <Link to="!#" className="sidenav-close">
                  Developers
                </Link>
              </li>
              <li>
                <Link to="/register" className="sidenav-close">
                  Register
                </Link>
              </li>
              <li>
                <Link to="/login" className="sidenav-close">
                  Login
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <ul className="sidenav blue-grey darken-4" id="mobile-demo">
        <li>
          <Link to="!#" className="sidenav-close">
            Developers
          </Link>
        </li>
        <li>
          <Link to="/register" className="sidenav-close">
            Register
          </Link>
        </li>
        <li>
          <Link to="/login" className="sidenav-close">
            Login
          </Link>
        </li>
      </ul>
    </div>
  );
};
export default Navbarguest;

由于useEffect，汉堡图标不起作用的主要原因。因为我只允许它运行一次，所以我们必须添加参数以保持运行。

 useEffect(() => {
    var elem = document.querySelector(".sidenav");
    var instance = M.Sidenav.init(elem, {
      edge: "left",
      inDuration: 250
    });
  });

下面是完整的代码

const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
  useEffect(() => {
    var elem = document.querySelector(".sidenav");
    var instance = M.Sidenav.init(elem, {
      edge: "left",
      inDuration: 250
    });
  },[loading,isAuthenticated]);

  return (
    <div>
      {!loading && (
        <Fragment>
          {isAuthenticated ? (
            <div>
              <nav>
                <div className="nav-wrapper blue-grey darken-4">
                  <div className="container">
                    <Link to="/" className="brand-logo sidenav-close">
                      WebDev
                    </Link>
                    <a
                      to="#"
                      data-target="mobile-demo"
                      className="sidenav-trigger"
                    >
                      <i className="material-icons">menu</i>
                    </a>
                    <ul className="right hide-on-med-and-down">
                      <li>
                        <Link onClick={logout} to="/" className="sidenav-close">
                          Logout
                        </Link>
                      </li>
                    </ul>
                  </div>
                </div>
              </nav>

              <ul className="sidenav blue-grey darken-4" id="mobile-demo">
                <li>
                  <Link onClick={logout} to="/" className="sidenav-close">
                    Logout
                  </Link>
                </li>
              </ul>
            </div>
          ) : (
            <Navbarguest />
          )}
        </Fragment>
      )}
    </div>
  );
};
Navbar.prototype = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

使用MaterializeCSS响应sidenav做出反应，无法单击并弹出

1 个答案: