前端项目实战伍拾捌react-admin+material ui-踩坑-List需要Datagrid中body写法

List需要Datagrid进行包裹 

import React from "react"
import { Datagrid, DatagridBody, List,BooleanField, TextField, RecordContextProvider } from 'react-admin';
import { TableCell, TableRow, Checkbox } from '@mui/material';

const MyDatagridRow = ({ record, id, onToggleItem, children, selected, selectable }) => (
    <RecordContextProvider value={record}>
        <TableRow>
            {/* first column: selection checkbox */}
            <TableCell padding="none">
                {selectable && (
                     <Checkbox
                         checked={selected}
                         onClick={event => onToggleItem(id, event)}
                     />
                )}
            </TableCell>            
            {/* data columns based on children */}
            {React.Children.map(children, field => (
                <TableCell key={`${id}-${field.props.source}`}>
                    {field}
                </TableCell>
            ))}
        </TableRow>
    </RecordContextProvider>
);

const MyDatagridBody = props => <DatagridBody {...props} row={<MyDatagridRow />} />;
const MyDatagrid = props => <Datagrid {...props} body={<MyDatagridBody />} />;

const DatagridBodyList = () => (
    <List resource="t_geyao_person">
        <MyDatagrid>
            <TextField source="id" />
            <TextField source='name'></TextField>
            <TextField source='sex'></TextField>
            <TextField source='salary'></TextField>
            <BooleanField source='status'></BooleanField>
        </MyDatagrid>
    </List>
)

export default DatagridBodyList;

运行结果