时间戳

首页 > 解决方案 > 使用 Antd 表列和列组的替代方法

javascript - 使用 Antd 表列和列组的替代方法

问题描述

根据Ant Design 的 Column grouping demo，Ant Design表通常只是像下面这样调用 - 假设您已经预先填写columns并data适当：

<Table 
   columns={columns} 
   dataSource={data} 
   // ... other parameters
/>

但是，我偶然发现了使用const { Column, ColumnGroup } = Table;解构（class MyTable extends Table<Interfaces.myTable>return()render()

<div>
  <div className="myTable">
    <MyTable dataSource={myData}
             locale={{ emptyText: 'No data found'}}>
      <ColumnGroup title="Headline 1">
         <MyColumn title="Col 1.1" 
                   dataIndex="iName"
                   key="kName"
         />
      </ColumnGroup>
</MyTable>

现在的问题是，现在（从 Antd 2.10.0 更新到 3.23.3 之后）不再起作用：

错误 TS2459 (TS) 类型“组件类”，“正在加载”| “页脚” | “风格” | “标题” | “滚动” | “尺寸” | “孩子” | "类名" | "前缀Cls" | “语言环境” | "getPopupContainer" | "onChange" | “数据源” | ... 27 更多... | "sortDirections">, any>' 没有属性 'ColumnGroup' 也没有字符串索引签名

我知道这主要是因为node_modules\antd\lib\table\Table.d.ts现在看起来不同，并且不再包含该ColumnGroup属性。如果我不想从字面上重写数千行代码，我现在有什么选择？

标签： javascriptreactjstypescriptantd

解决方案

移动主要版本被认为是重大更改，因此在您的情况下，您可能希望保留当前版本2.x.x或使用新版本重新实现组件逻辑。

关于React 的继承，React 有一个强大的组合模型，它推荐使用组合而不是继承来重用组件之间的代码。

如果您仍然考虑继承：

在Facebook，我们在数以千计的组件中使用 React，我们还没有发现任何建议创建组件继承层次结构的用例。

道具和组合为您提供了以明确和安全的方式自定义组件外观和行为所需的所有灵活性。请记住，组件可以接受任意道具，包括原始值、React 元素或函数。

如果您想在组件之间重用非 UI 功能，我们建议将其提取到单独的 JavaScript 模块中。组件可以导入它并使用该函数、对象或类，而无需扩展它。

当您遇到无法避免继承的情况时，请尝试询问高级 React 开发人员，您可能会遗漏一些东西，无论如何您始终可以使用引用并在它们上使用组合。

推荐阅读