除非我重繪，否則React側邊欄選單項不會更新活動狀態

我在我的 React 應用程式中將 react-sidebar-pro 用于我的側邊欄組件，并且我希望我的側邊欄選單項的活動狀態在用戶單擊并重定向到鏈接時變為 true。到目前為止，我所做的是設定一個引數，如果用戶位于特定地址，它將變為真，但僅在我重繪 頁面時更新。如何在無需重繪 頁面的情況下更新它，使其看起來回應迅速？我想使用 useState 來解決這個問題，但我不知道如何將它應用到代碼中，因為我還在學習 React

這是我的 Sidebar.js

function Sidebar() {
        //create initial menuCollapse state using useState hook
        const [menuCollapse, setMenuCollapse] = useState(false)

        //create a custom function that will change menucollapse state from false to true and true to false
      const menuIconClick = () => {
        //condition checking to change state from true to false and vice versa
        menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
      }
    return (
        <>
        <div id="header">
            {/* collapsed props to change menu size using menucollapse state */}
          <ProSidebar collapsed={menuCollapse}>
            <SidebarHeader>
            <div className="logotext">
                {/* small and big change using menucollapse state */}
                <p>{menuCollapse ? "LOGO" : "LONG LOGO"}</p>
              </div>
              <div className="closemenu" onClick={menuIconClick}>
                  {/* changing menu collapse icon on click */}
                {menuCollapse ? (
                  <FiArrowRightCircle/>
                ) : (
                  <FiArrowLeftCircle/>
                )}
              </div>
            </SidebarHeader>
            <SidebarContent>
              <Menu iconShape="square">
                <MenuItem active={window.location.pathname === "/"} icon={<FiHome />} >
                  Home
                <Link to="/"/>
                </MenuItem>
                <MenuItem  active={window.location.pathname === "/FAQ"}  icon={<FaList />}>
                  FAQ 
                <Link to="/FAQ"/>
                </MenuItem>
                <MenuItem  active={window.location.pathname === "/Search-sec"} icon={<RiPencilLine />}>SEARCH SEC<Link to="/Search-sec"/></MenuItem>
            </SidebarContent>
            <SidebarFooter>
              <Menu iconShape="square">
                <MenuItem icon={<FiLogOut />}>Logout</MenuItem>
              </Menu>
            </SidebarFooter>
          </ProSidebar>
        </div>
      </>
    )
}

export default Sidebar

uj5u.com熱心網友回復：

這里基本上有兩個選擇：

1. 將 window.location.path 作為您的本地狀態，請參閱為什么 useEffect 不會在 window.location.pathname 更改時運行？
2. 添加另一個狀態（根據單擊更改），以強制組件重新渲染

function Sidebar() {

  const [menuCollapse, setMenuCollapse] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);

  const menuIconClick = () => {
    setMenuCollapse(!menuCollapse);
  };

  return (
    <>
      <div id="header">
        {/* collapsed props to change menu size using menucollapse state */}
        <ProSidebar collapsed={menuCollapse}>
          <SidebarHeader>
            <div className="logotext">
              {/* small and big change using menucollapse state */}
              <p>{menuCollapse ? "LOGO" : "LONG LOGO"}</p>
            </div>
            <div className="closemenu" onClick={menuIconClick}>
              {/* changing menu collapse icon on click */}
              {menuCollapse ? (
                <FiArrowRightCircle />
              ) : (
                <FiArrowLeftCircle />
              )}
            </div>
          </SidebarHeader>
          <SidebarContent>
            <Menu iconShape="square">
              <MenuItem active={activeIndex === 0} icon={<FiHome />} >
                Home
                <Link id="MenuItemHome" to="/" onClick={() => setActiveIndex(0)} />
              </MenuItem>
              <MenuItem  active={activeIndex === 1}  icon={<FaList />} >
                FAQ
                <Link id="MenuItemFAQ" to="/FAQ" onClick={() => setActiveIndex(1)} / >
              </MenuItem>
              <MenuItem  active={activeIndex === 2} icon={<RiPencilLine />}>
                SEARCH SEC
                <Link id="MenuItemSearch" to="/Search-sec" onClick={() => setActiveIndex(2)} />
              </MenuItem>
            </Menu>
          </SidebarContent>
          <SidebarFooter>
            <Menu iconShape="square">
              <MenuItem icon={<FiLogOut />}>Logout</MenuItem>
            </Menu>
          </SidebarFooter>
        </ProSidebar>
      </div>
    </>
  );
}

export default Sidebar;

標籤：javascript 反应 反应原生 反应钩子 反应路由器

上一篇：從嵌套陣列中洗掉第一個括號

下一篇：計算機網路PPT總結-第一章