Перезапись одного (вложенного) свойства при расширении класса React

Question

Я довольно новичок в React.js, я думаю, что понял основные концепции, и я изо всех сил пытаюсь найти документацию о том, как перезаписать одно свойство класса, который я объявляю.

В одном из моих компонентов я определяю новый класс MyColumn на основе класса из Ant Design . Архитектура (наследования, а не композиции) уже была создана другими, и я не могу это изменить.

import { Table } from "antd";
const { Column } = Table;
// ... 
class MyColumn extends Column<Interfaces.myViewEntry> { }   // <---

В данный момент заголовки столбцов просто текут вниз, мне нужны точки с многоточием (и наведение курсора с полной меткой столбца) или правильная перенос слов. Возможно, с последним проще.

Чтобы достичь этой цели, я хочу установить свойство style: { 'white-space': 'unset' } (и только это свойство) для MyColumn, поскольку я прочитал, что это позволит мне получить правильное слово-обернуть для заголовков столбцов.

Может, кто-нибудь уточнит, что заключить в скобки в строке, которую я пометил <--?

Фон

В interfaces.tsx я определил что-то вроде следующего

export interface myViewEntry{
    LastName: string,
    FirstName: string,
    Result: number,
}

Ссылки

• Перезапись и расширение прототипа
• React.js: setState перезапись, без слияния
• Как выполнить перенос слов для данных с использованием таблицы реакции?
• Как настроить компонент таблицы заголовка ant design?
• Как обновить свойства вложенного состояния в React
• Reactjs-документация на Компоненты и свойства и на Состав и наследование

Answer 1

на мой взгляд, лучше обернуть компоненты ant-design своими собственными и добавить к этому дополнительные свойства. Например:

import { Table } from 'antd';

export default function MyTableColumn({ children, ...rest }) {
  //...useState, useRef, useEffect, whatever you need.
  return <Table.Column {...rest}>{children}</Table.Column>
}