Overwriting a single (nested) property when extending a React class

问题

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.

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.

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 <--?

Background

In interfaces.tsx, I defined something like the following

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

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

回答1:

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>
}

来源：https://stackoverflow.com/questions/58285455/overwriting-a-single-nested-property-when-extending-a-react-class

标签

reactjs

class

inheritance

antd