react-data-grid 无法实现行分组 - 也可能是插件问题

react-data-grid cannot implement row grouping - possible addons issue as well

我正在使用 react-data-grid and I have not really managed to get the row grouping 功能来工作。 我无法通过工具栏配置,但即使我将其注释掉(我实际上不想显示工具栏,因为默认情况下我希望将一些列分组,仅此而已,但仍然)我仍然无法让它工作。

因此,首先安装插件:

yarn add react-data-grid
yarn add react-data-grid-addons

第一个错误是关于我的 CustomToolbar 组件(几乎是从示例中复制的)

Uncaught (in promise) Error: Element type is invalid: expected a
string (for built-in components) or a class/function (for 
composite components) but got: undefined. You likely forgot to 
export your component from the file it's defined in. Check the 
render method of `CustomToolbar`.

但我的 CustomToolbar 看起来还不错,除了它使用 addons 存储库中的组件之外:

import React from 'react';
import {ToolsPanel} from 'react-data-grid-addons';

const {Toolbar, GroupedColumnsPanel} = ToolsPanel;    

const CustomToolbar = ({groupBy, onColumnGroupAdded, onColumnGroupDeleted}) => {
    return (<Toolbar>
      <GroupedColumnsPanel 
        groupBy={groupBy} 
        onColumnGroupAdded={onColumnGroupAdded} 
        onColumnGroupDeleted={onColumnGroupDeleted}
      />
    </Toolbar>
  );
};

export default CustomToolbar;

我使用 react-data-grid-addons/README.md 作为导入的参考,但我不确定它是否已更新,根据回购协议的文档判断。

如果我将 toolbar 属性 注释掉,我会得到 HeaderRow 组件的相同错误,这又是回购的组件之一。

您想导入 AdvancedToolbar,而不是工具栏。

勾选example source code

const {
  ToolsPanel: { AdvancedToolbar: Toolbar, GroupedColumnsPanel },
  Data: { Selectors },
  Draggable: { Container: DraggableContainer },
  Formatters: { ImageFormatter }
} = require('react-data-grid-addons');

它正在导入 AdvancedToolbar,而不是 Toolbar 组件。此外,如果您检查 the export for the ToolsPanel,您可以看到没有任何名为 Toolbar 的组件被导出,这就是为什么您在 render 方法中出现错误。