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

前端歌谣

于 2023-08-07 09:32:34 发布

阅读量40

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/131823353

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

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

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>
);