前端项目实战玖拾react-admin+material ui-踩坑-List的用法之children用法之WithListContext

简介: 前端项目实战玖拾react-admin+material ui-踩坑-List的用法之children用法之WithListContext
import {
    List,
    BooleanField,
    TextField,
    Datagrid,
    WithListContext
} from 'react-admin';
import IconEvent from '@mui/icons-material/Event';
import { Typography,Stack } from '@mui/material';
const Aside = () => (
    <div style={{ width: 200, margin: '1em' }}>
        <Typography variant="h6">歌谣</Typography>
        <Typography variant="body2">
           歌谣不要方
        </Typography>
    </div>
);
export const RChildrenList = () => {
    return (<List resource="t_geyao_person">
        {/* <Datagrid>
            <TextField source='id'></TextField>
            <TextField source='name'></TextField>
            <TextField source='sex'></TextField>
            <TextField source='salary'></TextField>
            <BooleanField source='status'></BooleanField>
        </Datagrid> */}
        <WithListContext render={({ data }) => (
            <Stack spacing={2} sx={{ padding: 2 }}>
                {data?.map(book => (
                    <Typography key={book.id}>
                        <i>{book.id}</i>, by {book.name} ({book.sex})
                    </Typography>
                ))}
            </Stack>
        )} />
    </List>)
}

运行结果

image.png

相关文章
|
6月前
|
安全 C#
C# List基本用法
C# List基本用法
|
14天前
|
前端开发 数据可视化 JavaScript
🚀打造卓越 UI:2024 年不容错过的 9 个 React UI 组件库✨
本文介绍了2024年最受欢迎的9个React UI组件库,每一个都在设计、功能和定制化上有独特的优势,包括Material UI、Ant Design、Chakra UI等。这些组件库为开发者提供了强大、灵活的工具,可以帮助构建现代化、无障碍且高效的Web应用程序。文章详细分析了每个库的特点、适用场景以及关键功能,帮助开发者在项目中做出最合适的选择,无论是打造企业级仪表板还是时尚的用户界面。
51 6
🚀打造卓越 UI:2024 年不容错过的 9 个 React UI 组件库✨
|
2月前
|
前端开发 JavaScript
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
34 2
React技术栈-React UI之ant-design使用入门
|
2月前
|
传感器 监控 前端开发
WHAT - 通过 react-use 源码学习 React(UI 篇)
WHAT - 通过 react-use 源码学习 React(UI 篇)
|
3月前
|
前端开发 JavaScript 算法
|
3月前
|
JavaScript 前端开发 算法
|
3月前
|
自然语言处理 前端开发 JavaScript
魔改react-calendar还原UI设计中的打卡日历效果
魔改react-calendar还原UI设计中的打卡日历效果
37 0
|
5月前
|
存储 索引 Python
Python教程:深入了解 Python 中 Dict、List、Tuple、Set 的高级用法
Python 中的 Dict(字典)、List(列表)、Tuple(元组)和 Set(集合)是常用的数据结构,它们各自有着不同的特性和用途。在本文中,我们将深入了解这些数据结构的高级用法,并提供详细的说明和代码示例。
171 2
|
5月前
|
存储 C++
C++初阶学习第十一弹——探索STL奥秘(六)——深度刨析list的用法和核心点
C++初阶学习第十一弹——探索STL奥秘(六)——深度刨析list的用法和核心点
50 7
|
5月前
|
前端开发 索引
解决React报错Encountered two children with the same key
解决React报错Encountered two children with the same key