如何在react-admin中以树形结构展示嵌套数据？

当然可以！react-admin 完全支持用树形视图展示嵌套数据，我给你分享几种实用的实现方案，你可以根据需求选择：

react-admin 自带了专门的 <Tree> 组件，专门用来处理分类、文件夹这类嵌套结构的数据，上手非常快。

首先要确保你的数据结构符合树形要求：每个节点需要包含 id、parentId（根节点可以设为 null 或 0），如果是API返回嵌套格式（每个节点带 children 数组）也能适配。

简单示例代码：

import { Tree, TreeList, TreeItem } from 'react-admin';
import { TextField } from '@mui/material';

const CategoryTree = () => (
    <Tree resource="categories">
        <TreeList>
            <TreeItem content={<TextField source="name" />} />
        </TreeList>
    </Tree>
);

这个组件会自动根据 parentId 构建树形结构，自带展开/折叠交互，还能结合 react-admin 的其他功能（比如搜索、筛选）一起使用。

如果需要更定制化的样式或功能（比如给节点加编辑/删除按钮、自定义展开图标），可以基于 MUI 的 <TreeView> 组件封装，结合 react-admin 的数据获取能力实现。

示例思路：

• 用 useGetList 钩子获取所有节点数据
• 手动把扁平数据转换成树形结构
• 用 MUI 组件渲染树形视图

代码示例：

import { useGetList } from 'react-admin';
import TreeView from '@mui/lab/TreeView';
import TreeItem from '@mui/lab/TreeItem';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { IconButton } from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';

const CustomTree = () => {
    const { data, isLoading } = useGetList('categories');

    // 把扁平数据转成树形结构的工具函数
    const buildTree = (items, parentId = null) => {
        return items
            ?.filter(item => item.parentId === parentId)
            .map(item => ({
                ...item,
                children: buildTree(items, item.id)
            })) || [];
    };

    const treeData = buildTree(data);

    // 递归渲染树形节点
    const renderTreeNodes = (nodes) => {
        return nodes.map(node => (
            <TreeItem 
                key={node.id} 
                nodeId={String(node.id)} 
                label={
                    <>
                        {node.name}
                        <IconButton size="small">
                            <EditIcon />
                        </IconButton>
                    </>
                }
            >
                {node.children.length > 0 && renderTreeNodes(node.children)}
            </TreeItem>
        ));
    };

    if (isLoading) return <div>加载中...</div>;

    return (
        <TreeView
            defaultCollapseIcon={<ExpandMoreIcon />}
            defaultExpandIcon={<ChevronRightIcon />}
        >
            {renderTreeNodes(treeData)}
        </TreeView>
    );
};

这种方式你可以完全掌控节点的渲染逻辑，想加什么功能都能自己扩展。

如果你的树形数据量很大，一次性加载所有节点会拖慢性能，可以做懒加载：只加载当前展开节点的子节点。

核心思路是利用 useGetList 的 enabled 参数，只有当节点展开时才请求子节点数据：

import { useGetList } from 'react-admin';
import TreeItem from '@mui/lab/TreeItem';

const LazyTreeItem = ({ node }) => {
    const [isExpanded, setIsExpanded] = useState(false);
    // 只有节点展开时才请求子节点
    const { data: children, isLoading } = useGetList('categories', {
        filter: { parentId: node.id },
        enabled: isExpanded
    });

    return (
        <TreeItem
            nodeId={String(node.id)}
            label={node.name}
            onExpand={() => setIsExpanded(true)}
            onCollapse={() => setIsExpanded(false)}
        >
            {isLoading ? <span>加载子节点中...</span> : 
             children?.map(child => <LazyTreeItem key={child.id} node={child} />)}
        </TreeItem>
    );
};

这样就能按需加载数据，大幅提升页面性能。

注意事项 #

• 确保你的API支持按 parentId 筛选数据，或者能返回嵌套格式的树形数据
• 可以结合 react-admin 的权限控制、批量操作等功能，让树形视图更贴合业务需求

内容的提问来源于stack exchange，提问作者Chetan Gawai