如何默认隐藏侧边栏？

Question

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

Answer 1

如果没有状态控制，就会得到defaultCollapsed属性。

defaultCollapsed -设置初始状态-类型:boolean- default: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} />