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

我最终通过伪装所需的道具来设法使用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 2

我们有一个在仪表板上创建列表的请求，因此我使用了接受的答案。尽管分页不会更改，但即使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 3

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

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

Answer 4

您必须要显示来自各种资源的数据，否则，您将只使用常规的“列表”页面。

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

传递给组件的多个dataProvider（GET_LIST，...。您可以使用此演示仪表板组件作为示例。Pending Orders

Answer 5

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

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

类似于basePath控制台显示与其他道具相同的警告“ currentSort，defaultTitle，displayedFilters，filterValues，hasCreate，hideFilter，isLoading，loadedOnce，onToggleItem，onUnselectItems，perPage，selectedIds，setFilters，setPages，setPerPage，setPerPage，setSort，showFilter，hasBulkActions” / p>

警告：标签上道具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>

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

5 个答案: