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

简介: 前端项目实战玖拾壹react-admin+material ui-踩坑-List的用法之children用法之SimpleList
import {
    List,
    BooleanField,
    TextField,
    Datagrid,
    WithListContext,
    SimpleList
} 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>
        )} /> */}
        <SimpleList 
           primaryText={record => <i>record.id</i>}
          secondaryText={record => <>By {record.name} ({record.sex})</>}
     />
    </List>)
}

运行结果

image.png

相关文章
|
前端开发 开发者 UED
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。
693 4
|
存储 人工智能 数据中心
阿里云基础设施网络亮相SIGCOMM22 - 可预期网络取得重大突破
阿里云基础设施网络亮相SIGCOMM22 - 可预期网络取得重大突破
阿里云基础设施网络亮相SIGCOMM22 - 可预期网络取得重大突破
|
存储 关系型数据库 数据库
服务器数据恢复—ESXi无法识别原数据存储和VMFS文件系统的数据恢复案例
一台某品牌服务器,通过FreeNAS来做iSCSI,然后使用两台同品牌服务器做ESXi虚拟化系统。 FreeNAS层为UFS2文件系统,使用整个存储建一个稀疏模式的文件,挂载到ESXi虚拟化系统。ESXi虚拟化系统中有3台比较重要的虚拟机,这几台虚拟机情况如下: 1、windows server操作系统,运行门户网站,采用ASP.net+PHP混合构架,部署的SqlServer和mysql数据库 。 2、FreeBSD操作系统,运行Mysql数据库,供其他多台虚拟机使用。 3、windows server系统,存放新开发的程序代码。
|
机器学习/深度学习 人工智能 算法
NeurIPS 2024:拆解高复杂运筹问题的砖石,打破数据稀缺的瓶颈,中科大提出高质量运筹数据生成方法
中国科学技术大学团队在NeurIPS 2024提出MILP-StuDio方法,通过拆解与重构MILP实例的块结构生成高质量数据,解决MILP领域数据稀缺问题。该方法保持实例可行性和计算难度,实验表明可将求解时间减少超10%。尽管存在块结构识别依赖和问题类型覆盖局限,但仍为提升MILP求解器性能提供新思路。
259 8
|
存储 Web App开发 安全
【BP靶场portswigger-客户端12】跨站点请求伪造CSRF-12个实验(全)(下)
【BP靶场portswigger-客户端12】跨站点请求伪造CSRF-12个实验(全)(下)
1309 0
【BP靶场portswigger-客户端12】跨站点请求伪造CSRF-12个实验(全)(下)
|
数据采集 机器学习/深度学习 弹性计算
个人使用阿里云服务器能干什么?
个人使用阿里云服务器能干什么?使用阿里云服务器可以做什么?阿里云百科分享使用阿里云服务器常用的十大使用场景,说是十大场景实际上用途有很多,阿里云百科分享常见的云服务器使用场景,如本地搭建ChatGPT、个人网站或博客、运维测试、学习Linux、跑Python、小程序服务器等等,云服务器吧分享使用阿里云服务器可以做的几件小事
1762 0
|
Linux Docker Python
【docker】Mac M1 构建 x64 linux镜像
【docker】Mac M1 构建 x64 linux镜像
436 0
|
存储 缓存 Java
java应用提速(速度与激情)
本文将阐述通过基础设施与工具的改进,实现从构建到启动全方面大幅提速的实践和理论。
50333 13
java应用提速(速度与激情)
OpenCV-图像阴影调整
OpenCV-图像阴影调整
559 0
|
存储 NoSQL 关系型数据库
分布式锁的实现方式
分布式锁的实现方式
319 0