扩展 React 类时覆盖单个（嵌套）属性

Question

我对 React.js 相当陌生，我相信我理解了主要概念，并且我正在努力寻找有关如何覆盖我正在声明的类的单个属性的文档。

在我的一个组件中，我基于来自Ant Design 的类定义了一个新类MyColumn。架构（继承而不是组合）已经由其他人制作，我无法更改。

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

目前，列标题只是向下流动，我需要省略号（以及带有完整列标签的鼠标悬停）或适当的自动换行。可能后者更容易。

为了达到这个目标，我想为MyColumn 设置属性style: { 'white-space': 'unset' }（并且只是那个属性），因为我读到这将允许我为列标题获得正确的自动换行。

有人可以详细说明在我用<-- 标记的行中的括号中要放入什么吗？

背景

在interfaces.tsx 中，我定义了如下内容

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

参考文献

• Overwriting and Extending Prototype
• React.js: setState overwriting, not merging
• How to do word-wrap for data using react-table?
• How can we configure the Header of ant design table component?
• How to update nested state properties in React
• Components and Properties 和 Composition and Inheritance 上的 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>
}