Альтернативный способ использования столбцов таблицы Antd и групп столбцов

Question

Согласно Демонстрация группировки столбцов Ant Design , 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) Тип 'ComponentClass, "загрузка" |"нижний колонтитул" |"стиль" |"название" |"свиток" |"размер" |"дети" |"className" |"prefixCls" |"язык" |"getPopupContainer" |"onChange" |"источник данных" |... еще 27 ... |"sortDirections">, any> 'не имеет свойства' ColumnGroup 'и не имеет подписи строкового индекса

Я понимаю, что это в основном потому, что node_modules\antd\lib\table\Table.d.ts теперь выглядит иначе и больше не содержит ColumnGroupсвойство. Какие у меня есть альтернативы, если я не хочу переписывать буквально тысячи строк кода?

Answer 1

Перемещение основной версии , рассматриваемой как критические изменения , поэтому в вашем случае вы можете захотеть остаться в текущей версии 2.x.x или повторно внедрить логику компонентов с новой версией.

---

О наследовании с React , React имеет мощную модель композиции, рекомендуется использовать композицию вместо наследования для повторного использования кода между компонентами.

Если вывсе еще подумайте о наследовании :

На Facebook , мы используем React в тысячах компонентов , и мы не нашли ни одного случая использования, когдаМы рекомендуем создать иерархии наследования компонентов .

. Реквизит и состав обеспечивают вам всю необходимую гибкость для настройки внешнего вида и поведения компонента в явном и безопасном виде. Помните, что компоненты могут принимать произвольные реквизиты, включая примитивные значения, элементы React или функции.

Если вы хотите повторно использовать функциональность, не относящуюся к пользовательскому интерфейсу, между компонентами, мы предлагаем извлечь их в отдельный модуль JavaScript. Компоненты могут импортировать его и использовать эту функцию, объект или класс, не расширяя его.

Когда вы попадаете в ситуацию, когда наследование невозможно избежать, попробуйте обратиться к старшему разработчику React, и выможет просто что-то пропустить, в любом случае вы всегда можете использовать ссылки и использовать на них композицию.