扩展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，不进行合并
• 如何使用以下方法对数据进行自动换行反应表?
• 我们如何配置ant设计表组件?
• 如何在React中更新嵌套状态属性
• 组件和属性以及组成和继承

References

• 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
• Reactjs-documentation on Components and Properties and on Composition and Inheritance

推荐答案

最好将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屋！