如何从React-Admin主题文档示例中访问admin对象及sidebarOpen属性？

我来帮你理清这两个问题，React-Admin的Redux状态管理有它特定的规则，咱们一步步来：

一、让useSelector(state => state.admin.ui.sidebarOpen)能正常运行的必要操作 #

1. 确保组件在<Admin>上下文内 #

React-Admin的Redux store是由根组件<Admin>初始化并提供的，你的组件必须是<Admin>的后代组件才能访问到state.admin这部分状态。如果你的组件在<Admin>外面（比如独立的全局导航栏），是拿不到这个状态的。

举个正确的组件嵌套示例：

import { Admin, Resource } from 'react-admin';
import { PostList } from './posts';
// 你的自定义组件，要放在Admin内部
import MyCustomComponent from './MyCustomComponent';

const App = () => (
  <Admin dataProvider={yourDataProvider}>
    <Resource name="posts" list={PostList} />
    {/* 这里的组件就能访问到admin状态 */}
    <MyCustomComponent />
  </Admin>
);

2. 导入useSelector依赖 #

useSelector是react-redux提供的Hook，你需要先确保安装了依赖（React-Admin默认会包含它），然后在组件中导入：

import { useSelector } from 'react-redux';

3. 确认<Admin>已正确配置 #

你必须在<Admin>组件中传入dataProvider（这是React-Admin的核心必备配置），否则Redux store不会初始化admin状态切片。没有正确配置的话，state.admin会是undefined，自然访问不到sidebarOpen。

二、从主题示例中获取admin对象的两种方式 #

主题示例里的admin对象本质是Redux store中的admin状态切片，你有两种常见的获取方式：

方式1：直接用useSelector选取整个admin切片 #

这是最直接的方式，和获取sidebarOpen的逻辑一致，只是把选取范围扩大到整个admin：

import { useSelector } from 'react-redux';

const MyComponent = () => {
  // 获取整个admin状态对象
  const admin = useSelector(state => state.admin);
  
  // 可以访问admin下的所有子属性，比如：
  const isSidebarOpen = admin.ui.sidebarOpen;
  const currentResource = admin.resources;
  const isLoading = admin.loading > 0;
  
  return <div>Sidebar status: {isSidebarOpen ? 'Open' : 'Closed'}</div>;
};

方式2：在自定义布局/主题组件中通过props获取 #

如果你是在自定义布局组件（比如替换React-Admin默认的<Layout>），React-Admin会直接把常用的状态（包括sidebarOpen、toggleSidebar方法）作为props传递给布局组件，这时候你不需要自己去store中选取：

import { Layout } from 'react-admin';

// 自定义布局组件，直接从props接收admin相关状态
const CustomLayout = ({ children, sidebarOpen, toggleSidebar }) => (
  <div className="custom-layout">
    <header>
      <button onClick={toggleSidebar}>
        {sidebarOpen ? '收起侧边栏' : '展开侧边栏'}
      </button>
    </header>
    <main>{children}</main>
  </div>
);

// 在Admin中使用自定义布局
const App = () => (
  <Admin layout={CustomLayout} dataProvider={yourDataProvider}>
    <Resource name="posts" list={PostList} />
  </Admin>
);

常见排查点 #

如果还是访问不到sidebarOpen，可以检查：

• 打开Redux DevTools，查看store中是否存在admin切片
• 确认组件确实在<Admin>的子树中
• 检查是否有自定义Redux store配置覆盖了React-Admin的默认store结构

内容的提问来源于stack exchange，提问作者Alexsander da Rosa