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,而不是工具栏。
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 方法中出现错误。
我正在使用 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,而不是工具栏。
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 方法中出现错误。