web-dev-qa-db-ja.com

React-Adminダッシュボードで<List />を使用する

React-adminチュートリアルに示されているように、カスタムダッシュボードコンポーネントでreact-adminv2.3.2を使用しています。

    <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 />コンポーネントを使用することは可能ですか？使用する場合、これをどのように行うことができますか？

よろしくお願いします、トーマス

react-admin
7
Thomas Halwax

私はついに、必要な小道具を偽造することで、react-adminのコンポーネントを使用することができました。 MyDashboardコンポーネント内で、コンポーネントに必要な小道具を定義します。

    let fakeProps = 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>

これは確かに次善の解決策ですが、最初の実行でそれは私の問題を解決します。

1
Thomas Halwax

ダッシュボードにリストを作成するように要求されたので、受け入れられた回答を使用しました。ただし、URLが変更されていても、ページネーションによってサーバーへの新しいリクエストがトリガーされることはありません。

これは、react-routerv4を使用したページネーションで機能する最終的なソリューションです。

<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場所を変更したばかり-それ以外の場合は、最初のクリック（ルート変更）で機能し、その後機能しなくなります

1
Michail Michailidis

さまざまなリソースからのデータを表示する必要があります。そうでない場合は、通常の「リスト」ページを使用します。

ダッシュボードはこれを行うことができます。デモをご覧ください ダッシュボード

コンポーネントに渡す複数のdataProvider（GET_LIST、..。このデモダッシュボードコンポーネントを例として使用できます。 保留中の注文

0
BaliJack