export const dataGridList = [{ id: "1", name: "body", path: "body" }, { id: "2", name: "basic", path: "basic" }, { id: "3", name: "children", path: "children" }, { id: "4", name: "bulkActionButtons", path: "bulkActionButtons" }, { id: "5", name: "empty", path: "empty" }, { id: "6", name: "expand", path: "expand" } ]
第二步 添加路由
<CustomRoutes> <Route path="body/" element={<DatagridBodyList />} /> <Route path="basic/" element={<DatagridBasicList />} /> <Route path="children/" element={<DatagridChildrenList />} /> <Route path="bulkActionButtons/" element={<DatagridBulkActionList />} /> <Route path="empty/" element={<DatagridEmpty />} /> <Route path="expand/" element={<DatagridEmpty />} /> </CustomRoutes>
第三步 添加文件
import React from "react"; import { List, useRecordContext, Datagrid, TextField, EditButton, BooleanField } from 'react-admin'; const PostPanel = () => { const record = useRecordContext(); return ( <div dangerouslySetInnerHTML={{ __html: record.body }} /> ); }; const DatagridExpandList = () => ( <List resource="t_geyao_person"> <Datagrid expand={<PostPanel />}> <TextField source="id" /> <TextField source='name'></TextField> <TextField source='sex'></TextField> <TextField source='salary'></TextField> <BooleanField source='status'></BooleanField> </Datagrid> </List> ) export default DatagridExpandList
第四步 运行结果