扩展 React 类时覆盖单个(嵌套)属性 [英] Overwriting a single (nested) property when extending a React class

问题描述

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

I am rather new to React.js, I believe I understood the major concepts, and I am struggling to find documentation on how to overwrite a single property of a class I am declaring.

在我的一个组件中，我根据 Ant Design 中的类定义了一个新类 MyColumn.架构(继承而不是组合)已经由其他人完成，我无法更改.

In on of my components, I define a new class MyColumn based on a class from Ant Design. The architecture (of inheritance rather than composition) was already made by others, and I am not able to change that.

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

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

At the moment, the column headers just flows downward, I need either ellipsis dots (and a mouse-over with the full column label), or a proper word wrap. Probably, the latter is easier.

为了达到这个目标，我想为 MyColumn 设置属性 style: { 'white-space': 'unset' } (以及那个属性)，因为我读到这将使我能够为列标题获得正确的自动换行.

To reach that goal, I want to set the property style: { 'white-space': 'unset' } (and just that property) for MyColumn since I read that this will allow me to get proper word-wrap for the column headers.

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

Could somebody please elaborate what to put into the brackets in the line I marked with <--?

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

In interfaces.tsx, I defined something like the following

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

参考资料

• 覆盖和扩展原型
• React.js:setState 覆盖，不合并
• 如何使用反应表?
• 如何配置蚂蚁设计表组件?
• 如何在 React 中更新嵌套状态属性
• 关于组件和属性以及组合和继承

推荐答案

在我看来，最好将 ant-design 组件与您自己的组件一起包装起来，并为其添加其他属性.例如:

in my opinion it's better to wrap ant-design components with you own ones and add additional properties to that. For example:

import { Table } from 'antd';

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

这篇关于扩展 React 类时覆盖单个(嵌套)属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！