前端项目实战壹佰叁拾玖react-admin+material ui-react-admin之useListContext

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端技术群

import { Typography } from '@mui/material';
 
import { List, Datagrid, TextField,useListContext } from 'react-admin';
 const Aside = () => {
    const { data, isLoading } = useListContext();
    if (isLoading) return null;
    return (
        <div>
            <Typography variant="h6">Posts stats</Typography>
            <Typography variant="body2">
                Total views: {data.reduce((sum, post) => sum + post.views, 0)}
            </Typography>
        </div>
    );
};
 
// in src/posts/PostList.j
export const RUserListcontext = () => (
    <List resource="t_geyao_person" aside={<Aside />}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="name" />
            <TextField source="sex" />
        </Datagrid>
    </List>
);

运行结果