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

根据，表的调用通常如下所示-假设您已经适当地预先填充了

列

和

数据

：

然而，我偶然发现了这样一种代码，它使用解构（

const{Column，ColumnGroup}=Table；

）和继承（例如

classmytable extends Table

）来允许自定义组件的

render（）

部分的

return（）

函数中出现如下代码

<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）类型'ComponentClass'，加载“|”页脚“|”样式“|”标题“|”滚动“|”大小“|”子类“|”类名称“|预交换“|”区域设置“| getPopupContainer”| onChange”|“数据源”|。。。还有27个…|“sortDirections”>，any>”没有属性“ColumnGroup”，也没有字符串索引签名

我理解这主要是因为

node\u modules\antd\lib\table\table.d.ts

现在看起来不同了，不再包含

ColumnGroup

属性如果我不想重写上千行代码，我现在有什么选择？

被认为是破坏性的更改，因此在您的情况下，您可能希望保留当前版本

2.x.x

或使用新版本重新实现组件逻辑

---

关于,， React有一个强大的组合模型，建议使用组合而不是继承在组件之间重用代码

如果你仍然：

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

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

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

---

当您遇到无法避免继承的情况时，尝试询问高级React开发人员，您可能只是遗漏了一些东西，在任何情况下，您都可以在他们身上使用和使用组合。

@DennisVash问题是，如果没有v3.x.x，我就遗漏了我需要的基本功能，因此，我想我必须大量重写代码并摆脱继承。我刚刚了解了我们使用继承的原因（如果你可以这样说的话，是一种比较温和的形式）：我被告知，如果相应的库不注意使用正确的类型，那么这是一种修复类型脚本错误的方法。