react-data-grid無法實現行分組-可能還有插件問題

Question

我正在使用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看起來還不錯，除了它使用了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組件會出現相同的錯誤，它也是HeaderRow組件之一。

Answer 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方法中會出錯的原因。