前端项目实战壹佰叁拾陆react-admin+material ui-react-admin之Count之WithListContext之taglist组件

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

import { List, Datagrid, TextField, ReferenceArrayField, useListContext } from 'react-admin';
import { Chip, Stack } from '@mui/material';
const TagList = () => {
    const { isLoading, data } = useListContext();
    return isLoading 
        ? null
        : (
            <Stack direction="row" spacing={1}>
                {data.map(tag => (
                    <Chip key={tag.id} label={tag.name} />
                ))}
            </Stack>
        );
};
export const RWithListContext = () => (
    <List resource="t_geyao_person">
        <Datagrid>
            <TextField source="id" />
            <TextField source="name" />
            <ReferenceArrayField label="Tags" reference="tags" source="name">
            <TagList />
            </ReferenceArrayField>
        </Datagrid>
    </List>
);

运行结果