在 React-Admin 仪表板上使用 <List />

Question

我正在使用带有自定义仪表板组件的 react-admin v2.3.2，如 react-admin 教程中所示。

    <Admin dashboard={MyDashboard}>
       <Resource name="incidents ... />
    </Admin>

现在我想使用 react-admin 的组件在仪表板上显示事件列表，但 react-admin 抱怨缺少诸如“hasEdit”之类的属性。

我只是将仪表板组件的道具传递给列表，但这显然不起作用：

    class MyDashboard extends React.Component    {
      constructor(props) {
      super(props)

      render(
        return <List {...this.props}>
          <Datagrid> .... </Datagrid>
        </List>

      )
    }

是否可以在仪表板上使用 react-admin 的 <List /> 组件，如果可以，如何做到这一点？

提前致谢， 托马斯

Answer 1

我发现这个页面正在研究类似的东西。 现在（2020 年末）执行此操作的方法是在页面上为要在仪表板上显示的主要资源创建一个 ListContextProvider，以便获得该上下文提供的所有内容，包括过滤器。

const controllerProps = useListController(props);
  
<ListContextProvider value={controllerProps}>
  <MyDashboardView>
</ListContextProvider>

Answer 2

感谢您的解决方案。屏幕呈现以下警告

如何删除所有警告？ 警告：React 无法识别 DOM 元素上的 basePath 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 basepath。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

像 basePath 控制台显示与其他道具相同的警告“currentSort, defaultTitle,displayedFilters,filterValues,hasCreate,hideFilter,isLoading,loadedOnce,onToggleItem,onUnselectItems,perPage,selectedIds,setFilters,setPage,setPerPage,setSort,showFilter,hasBulkActions"

警告：标签上的 prop translate 值无效。要么将其从元素中移除，要么传递一个字符串或数值以将其保留在 DOM 中。详情

const initProps = {
  basePath: '/',
  hasCreate: false,
  hasEdit: false,
  hasList: true,
  hasShow: false,
  location: { pathname: '/', search: '', hash: '', state: undefined },
  match: { path: '/', url: '/', isExact: true, params: {} },
  options: {},
  permissions: null,
  resource: 'dashboard',
  perPage: 5
};

<List
{...initProps}
filterDefaultValues={{
  arrivedTimestampStart: moment().format('YYYY-MM-DD'),
  arrivedTimestamp: moment().format('YYYY-MM-DD')
}}
filters={<DashboardFilter />}
sort={{ field: 'arrivedTimestamp', order: 'DESC' }}
pagination={<Fragment />}
exporter={false}
>
<Responsive
  medium={
    <div style={styles.flex}>
     <OtherComponent />
    </div>
    }
/>
</List>

Answer 3

我终于设法通过伪造所需的道具来使用 react-admin 的组件。在 MyDashboard 组件中，我定义了组件所需的道具：

    let fakeProps = {
        basePath: "/incidents",
        hasCreate: false,
        hasEdit: false,
        hasList: true,
        hasShow: false,
        history: {},
        location: { pathname: "/", search: "", hash: "", state: undefined },
        match: { path: "/", url: "/", isExact: true, params: {} },
        options: {},
        permissions: null,
        resource: "incidents"
    }

    <List {...fakeProps}>
      <DataGrid>
        <TextField .... />
      </DataGrid>
    </List>

这确实是一个次优的解决方案，但在第一次运行时它解决了我的问题。

Answer 4

我们请求在仪表板中创建一个列表，因此我使用了已接受的答案。虽然分页不会触发对服务器的新请求，即使 url 发生了变化。

这是使用 react-router v4 进行分页的最终解决方案。

在<Admin dashboard={Dashboard}>我加了：

<Resource name="dashboard-stats"/>

在 Dashboard.js 中，这就是我所拥有的：

import React, { Component } from 'react';
import { GET_LIST } from 'react-admin';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';

import dataProvider from './dataProvider';
import {
    List,
    TextField,
    Datagrid
} from 'react-admin';


export default class Dashboard extends Component {
    state = {};

    initProps = {
        basePath: "/",
        hasCreate: false,
        hasEdit: false,
        hasList: true,
        hasShow: false,
        location: { pathname: "/", search: "", hash: "", state: undefined },
        match: { path: "/", url: "/", isExact: true, params: {} },
        options: {
        },
        permissions: null,
        resource: "dashboard-stats",
        perPage: 5
    };

    componentWillMount() {
        this.unlisten = this.props.history.listen((location, action) => {

        if (location.search) {
            //regex from: https://stackoverflow.com/a/8649003/1501205
            let queryParams = JSON.parse('{"' + decodeURI(location.search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
            let perPage = queryParams.perPage;
            let page = queryParams.page;
            this.initProps.perPage = perPage;
            this.initProps.page = page;
            this.initProps.location = location;
            this.setState({'initProps': this.initProps})

            }

        });
    }
    componentWillUnmount() {
        this.unlisten();
    }


    componentDidMount() {

        this.setState({'initProps': this.initProps});

        dataProvider(GET_LIST, 'stats', {
            sort: { field: 'date', order: 'DESC' },
            pagination: { page: 1, perPage: 50 },
        })
        .then(response => {
            this.setState({'stats':  response.data});
        });
    }

    render() {

        const {
            initProps
        } = this.state;

        if(!initProps) {
            return false;
        }


        return <Card>
            <CardHeader title="Welcome to the Dashboard" />


            <List {...initProps} >
                    <Datagrid>
                        <TextField source="description" />
                        <TextField source="state" />
                        <TextField source="date" />
                    </Datagrid>
                </List>

        </Card>;

    }
}

不要忘记用刚刚更改的位置更新位置this.initProps.location - 否则它将在第一次单击（路线更改）时起作用，然后它将停止工作

Answer 5

您一定希望显示来自各种资源的数据，否则您只会使用常规的“列表”页面。

仪表板可以做到这一点。看看演示Dashboard

您传递给组件的多个 dataProvider(GET_LIST,...。您可以使用此 Demo Dashboard 组件作为示例。Pending Orders