1

我想要一个更高级的 DataGrid，只要在使用 Datagrid 的地方添加React Flip Move 。这非常容易。DatagridBody.js我只需要添加这个

--- a/packages/ra-ui-materialui/src/list/DatagridBody.js
+++ b/packages/ra-ui-materialui/src/list/DatagridBody.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import shouldUpdate from 'recompose/shouldUpdate';
 import TableBody from '@material-ui/core/TableBody';
 import classnames from 'classnames';
+import FlipMove from 'react-flip-move';

 import DatagridRow from './DatagridRow';

@@ -25,6 +26,7 @@ const DatagridBody = ({
     ...rest
 }) => (
     <TableBody className={classnames('datagrid-body', className)} {...rest}>
+        <FlipMove>
         {ids.map((id, rowIndex) => (
             <DatagridRow
                 basePath={basePath}
@@ -46,6 +48,7 @@ const DatagridBody = ({
                 {children}
             </DatagridRow>
         ))}
+        </FlipMove>
     </TableBody>
 );

如何在不需要复制（和维护！） Datagrid.js 的情况下覆盖 react-admin 的这一文件？

更新。显然，装饰 react-admin 也是一种无需自定义组件即可改变行为的方式。

4

1 回答 1

1

我认为您不能仅使用源代码，因为 RA 甚至没有导出该组件。在出现的文件中DatagridBody，导出的组件是PureDatagridBody的HoC，Datagrid这意味着如果您扩展组件，它必须是，PureDatagridBody因为是导出的组件，您必须先导入才能扩展。也是如此Datagrid。

但是您可以根据需要在 node_module 中编辑 RA 的源代码，然后重新编译使其生效。或者克隆 RA，根据需要进行更改，出于相同的原因重新编译，然后像使用 RA 一样使用该副本。我个人不建议这样做，因为您无法在不丢失更改的情况下更新 RA，或者可以添加只有您可以修复它们的新错误。

最好的解决方案是将功能请求作为问题提交，请求将自定义行、列以及您喜欢的任何内容Datagrid作为道具传递。

于 2018-07-11T15:23:40.997 回答