Question

我想知道，默认情况下如何隐藏侧边栏菜单？刷新窗口时，我希望隐藏/折叠边栏。

Answer 1

没有状态控制，您就拥有defaultCollapsed属性。

defaultCollapsed-设置初始状态-类型：布尔值-默认值：false

在受控状态下，只需定义状态的初始值即可：

const [isCollapsed, setIsCollapsed] = useState(true);

如果要在刷新页面后“记住”最后一个侧边栏状态，请使用localStorage。

// @utils.js
export const setLSItem = (str, object) => window.localStorage.setItem(str, object);

export const getLSItem = str => window.localStorage.getItem(str);

export const getBooleanLSItem = str => {
  const storageItem = getLSItem(str);
  return storageItem === 'true' || !storageItem ? true : false;
};

// custom hook code
const leftCollapsedInitial =
  getBooleanLSItem(LOCAL_STORAGE_KEYS.LEFT_SIDEBAR_IS_VISIBLE)

const useLeftSidebar = () => {
  const [isCollapsed, setIsCollapsed] = useState(leftCollapsedInitial);

// On change update the local storage
  useEffect(() => {
    setLSItem(LOCAL_STORAGE_KEYS.LEFT_SIDEBAR_IS_VISIBLE, isCollapsed);
  }, [isCollapsed]);

  return [isCollapsed, setIsCollapsed];
}

Answer 2

从文档中可以使用defaultCollapsed。您还可以使用collapsed = {true / false}来设置状态以打开/关闭边线。

<Sider defaultCollapsed={true} />

默认情况下如何隐藏侧栏？

2 个答案: