0

我正在使用react-data-grid并且我还没有真正设法使行分组功能起作用。我无法通过工具栏配置，但即使我将其注释掉（我实际上不想显示工具栏，因为我希望默认情况下将某些列分组，就是这样，但仍然）我仍然无法让它工作。

因此，首先，安装插件：

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 看起来不错，除了它使用来自addonsrepo 的组件：

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用作导入的参考，但从 repo 的文档来看，我不确定它是否已更新。

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

4

1 回答 1

1

您要导入 AdvancedToolbar，而不是 Toolbar。

检查示例源代码

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

它正在导入 AdvancedToolbar，而不是 Toolbar 组件。此外，如果您检查ToolsPanel 的导出，您会发现没有任何称为Toolbar正在导出的组件，这就是您在 render 方法中收到错误的原因。

于 2017-01-27T09:11:11.003 回答