React-Admin - 如何在 React-Admin 中创建没有列表的数据网格

Question

如何在 React-Admin 中创建没有列表的数据网格？

在 React-admin 中，为了能够使用 Datagrid 显示值，您需要将其嵌套在这样的列表中：

<List {...props}>
 <Datagrid> 
  <Textfield source"name" />
 <Datagrid />
<List/>

但我需要在列表之外使用 dDatagrid。 Datagrid 的值必须显示在选项卡内类型的屏幕中。

Answer 1

这里是我如何使用 React-Admin 2.9 解决这个问题

首先，我使用 import { Query } from 'react-admin'; 从端点 data/product[=35 获取数据=] 然后它将 ID 转换为它自己数据的键。

向组件 CustomDatagrid 传递了两个数组，它们将用于显示值。第一个是 ID 数组，第二个数组是包含数据并使用 ID 作为其键以便能够访问值的数组。

ProductShow.js

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
  TextField,
  Query,
  showNotification,
  // ReferenceField,
  DateField,
} from 'react-admin';
import CustomDatagrid from './CustomDatagrid';

const convertKeyToIndice = (datas) => {
  const { data } = datas;
  let ids = [];
  const dataKey = [];

  if (data) {
    ids = data.map((elemento) => {
      dataKey[elemento.id] = elemento;
      return elemento.id;
    });
    return ({ ids, dataKey });
  }
  return ({});
};

const ProductShow = (props) => {
  const { record } = props;
  const { productId, dateValue } = record;

  const [newPage, setNewPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(50);

  const filter = {
    pagination: { page: newPage + 1, perPage: rowsPerPage },
    sort: { field: 'id', order: 'ASC' },
    filter: { productId, dateValue: dateValue },
  };

  return (
    <Query type="GET_LIST" resource="data/product" payload={filter}>
      {(datas) => {
        if (datas.loading && !datas.error) { return <div>Wait...</div>; }
        if (datas.error) {
          props.showNotification('Not Found');
          return <div />;
        }

        const dataGridValues = {
          ...convertKeyToIndice(datas),
          total: datas.total,
          rowsPerPage,
          setRowsPerPage,
          newPage,
          setNewPage,
        };

        return (
          <>
            <CustomDatagrid dataGridValues={dataGridValues}>
              {/* <ReferenceField
                sortBy="product.id"
                source="productId"
                reference="product"
                linkType={false}
                allowEmpty
                {...props}
                label="product"
              >
                <TextField source="name" />
              </ReferenceField> */}
              <DateField label="Date" source="valueDate" showTime />
              <TextField label="Value1" source="value1" />
              <TextField label="Value2"  source="value2" />
              <TextField label="Value3"  source="value3" />
              <TextField label="Value4" source="value4" />
              <TextField label="Value5" source="value5" />

            </CustomDatagrid>
          </>

        );
      }}
    </Query>
  );
};

ProductShow.propTypes = {
  productId: PropTypes.string.isRequired,
  dateValue: PropTypes.string.isRequired,
  showNotification: PropTypes.func.isRequired,
  record: PropTypes.oneOfType([PropTypes.object]).isRequired,
};

export default connect(null, { showNotification })(ProductShow);

在 TableHead 中，它显示每列的标签，按照您将组件包装在 CustomDatagrid 中的顺序 CustomDatagrid =27=]ProductShow组件。

要像 React-Admin 的列表那样显示组件，使用

                    {React.cloneElement(child,
                      { record: dataKey[id] },
                      (child.props.children ? child.props.children : null))}

CustomDatagrid.js

import React from 'react';
import {
  Table,
  TableRow,
  TableHead,
  TableCell,
  TableBody,
  TablePagination,
} from '@material-ui/core';
import PropTypes from 'prop-types';

const CustomDatagrid = (propsDataGrid) => {
  const { children, dataGridValues } = propsDataGrid;
  const {
    dataKey,
    ids,
    total,
    rowsPerPage,
    setRowsPerPage,
    setNewPage,
    newPage,
  } = dataGridValues;

  const handleChangePage = (event, page) => {
    setNewPage(page);
  };

  const handleChangeRowsPerPage = (event) => {
    const vlrDecimal = parseInt(event.target.value, 10);
    setRowsPerPage(vlrDecimal);

    setNewPage(0);
  };

  return (
    <>
      <Table style={{ width: '100%' }}>
        <TableHead>
          <TableRow>
            {children && children.map(({ props }) => (
              <TableCell>
                {props && props.label ? props.label : props.source}
              </TableCell>
            ))
          }
          </TableRow>
        </TableHead>
        <TableBody>
          {ids && ids.map(id => (
            <TableRow>
              {React.Children.map(children,
                child => (
                  <TableCell>

                    {React.cloneElement(child,
                      { record: dataKey[id] },
                      (child.props.children ? child.props.children : null))}

                  </TableCell>
                ))}
            </TableRow>
          ))
          }
        </TableBody>
      </Table>
      <TablePagination
        rowsPerPageOptions={[50, 100, 250]}
        component="div"
        count={total}
        rowsPerPage={rowsPerPage}
        page={newPage}
        onChangePage={handleChangePage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
        labelRowsPerPage="Results per Page:"
      />
    </>
  );
};


CustomDatagrid.propTypes = {
  source: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
};


export default CustomDatagrid;