javascript - React-data-grid 无法实现行分组 - 也可能存在插件问题

Question

我正在使用react-data-grid我还没有真正设法获得 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 组件相同的错误，该组件又是存储库的组件之一。

Answer 1

您想要导入 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 方法中收到错误的原因。