1 回答

TA貢獻1942條經驗 獲得超3個贊
您必須創建一個自定義列表渲染器來替代<Datagrid>,并將其作為 的子級傳遞<List>:
export const ContactList = (props) => {
? const classes = useStyles();
? return (
? ? ?<List className={classes.list}>
? ? ? ? <ContactSimpleList /<
? ? </List>
? )
};
該<List>組件創建一個, 并將,和ListContext放置在其中。因此,您可以通過列表渲染器中的上下文訪問此數據:idsdatatotal
import { useListContext } from 'react-admin';
const ContactSimpleList = () => {
? const { ids, data } = useListContext();
? return (
? ? <>
? ? ? {ids.map(id => (
? ? ? ? ? <ListItem key={id} button>
? ? ? ? ? ? <ListItemAvatar>
? ? ? ? ? ? ? <Avatar alt="Profile Picture" src={data[id].person}/>
? ? ? ? ? ? </ListItemAvatar>
? ? ? ? ? ? <ListItemText primary={data[id].name}/>
? ? ? ? ? </ListItem>
? ? ? ))}
? ? </>
? );
}
此外,您嘗試渲染的SimpleList 看起來很像由react-admin提供的本機組件:組件<SimpleList>
。您可能不需要編寫自定義渲染器。
添加回答
舉報