Question

从折叠左侧菜单开始是否容易，还是需要更新布局？我想默认情况下折叠菜单，仅显示图标。谢谢。

Answer 1

要隐藏左侧的Bar分隔线，我们需要调度 setSidebarVisibility 操作。

这是通过使用 useDispatch react-redux钩子和布局文件（layout.tsx）中的 setSidebarVisibility 操作：

import React from 'react';

/**
* Step 1/2 :Import required hooks (useEffect & useDispatch)
*/ 
import { useEffect } from 'react';
import { useSelector,useDispatch } from 'react-redux';

import { Layout, Sidebar ,setSidebarVisibility} from 'react-admin';
import AppBar from './AppBar';
import Menu from './Menu';
import { darkTheme, lightTheme } from './themes';
import { AppState } from '../types';

const CustomSidebar = (props: any) => <Sidebar {...props} size={200} />;

export default (props: any) => {
    const theme = useSelector((state: AppState) =>
        state.theme === 'dark' ? darkTheme : lightTheme
    );

    /**
    * Step 2/2 : dispatch setSidebarVisibility action
    */
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(setSidebarVisibility(false));
    });

    return (
        <Layout
            {...props}
            appBar={AppBar}
            sidebar={CustomSidebar}
            menu={Menu}
            theme={theme}
        />
    );
};

Answer 2

加载Admin的时候可以设置初始状态，这样就不会出现Sidebar一开始是可见的，然后就隐藏了： https://marmelab.com/react-admin/Admin.html#initialstate

const initialState = {
  admin: { ui: { sidebarOpen: false, viewVersion: 0 } }
}    

<Admin
  initialState={initialState}
  ...
</Admin>

Answer 3

如果在说“左侧菜单”时是指补充工具栏，则可以通过打开用户传奇来隐藏它（切换动作将继续起作用）：

// closeSidebarSaga.js

import {
  put,
  takeEvery,
} from 'redux-saga/effects'

import {
  SET_SIDEBAR_VISIBILITY,
  setSidebarVisibility,
} from 'react-admin'

function* closeSidebar(action) {
  try {
    if (action.payload) {
      yield put(setSidebarVisibility(false))
    }
  } catch (error) {
    console.log('closeSidebar:', error)
  }
}

function* closeSidebarSaga() {
  yield takeEvery(SET_SIDEBAR_VISIBILITY, closeSidebar) 
}

export default closeSidebarSaga

在react-admin库本身中，显然是一个错误，在登录后的某个时间点，将调用动作SET_SIDEBAR_VISIBILITY = true！

如何从左侧菜单开始折叠

3 个答案: