react-admin - 如果我想在过滤器和列表之间添加一些信息文本怎么办？

Question

标题说明了一切。

我找不到一个好的解决方案。

我想实现的是下面..

“共找到 10,000 个密钥”

以下是我的代码

 return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <List
            {...props}
            exporter={false}
            filters={<ComponentFilter choices={productPiNames} />}
            bulkActionButtons={<BulkActionButtons />}
          >
            <Datagrid>
             ...
            </Datagrid>
          </List>
        </Grid>
      </Grid>
    </div>
  );

标签： react-admin

Answer 1

不要使用<List>组件，而是使用<ListBase>，它允许您为 JSX 中的列表定义所需的确切布局。例如：

import { 
    Datagrid,
    ListBase,
    ListToolbar,
    BulkActionsToolbar,
    Pagination,
    useListContext,
} from 'react-admin';
import Card from '@material-ui/core/Card';

const PostList = props => (
    <MyList {...props}>
        <Datagrid>
            ...
        </Datagrid>
    </MyList>
);

const MyList = props => (
    <ListBase>
        <h1>{props.title}</h1>
        <ListToolbar
            filters={props.filters}
            actions={props.actions}
        />
        <Card>
            <BulkActionsToolbar>
                {props.bulkActionButtons}
            </BulkActionsToolbar>
            {cloneElement(children, {
                hasBulkActions: props.bulkActionButtons !== false,
            })}
            <Pagination />
        </Card>
    </ListBase>
);

检查 react-admin 文档<List>章节中的 ListBase 文档https://marmelab.com/react-admin/List.html#listbase