React/TypeScript: расширение компонента дополнительными свойствами

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

export interface DataTableProps {
    columns: any[];
    data: any[];
}

export class DataTable extends React.Component<DataTableProps, {}> {
   render() {
       // -- I can use this.props.columns and this.props.data --
   }
}

export class AnimalTable extends DataTable {
    render() {
       // -- I would need to use a this.props.onClickFunction -- 
    }
}

Моя проблема в том, что мне нужно дать AnimalTable некоторые реквизиты, которые не имеют отношения к DataTable. Как я могу это сделать?

Ответ 1

Вам понадобится создать DataTable generic, чтобы вы могли использовать интерфейс, который расширяет DataTableProps:

export interface AnimalTableProps extends DataTableProps {
    onClickFunction: Function;
}

export class DataTable<T extends DataTableProps> extends React.Component<T, {}> { }

export class AnimalTable extends DataTable<AnimalTableProps> {
    render() {
        // this.props.onClickFunction should be available
    }
}

Ответ 2

Самое элегантное решение, которое я нашел (без дополнительного универсального класса), это

interface IBaseProps {
    name: string;
}

class Base<P> extends React.Component<P & IBaseProps, void>{

}

interface IChildProps extends IBaseProps {
    id: number;
}

class Child extends Base<IChildProps> {
    render(): JSX.Element {
        return (
            <div>
                {this.props.id}
                {this.props.name} 
            </div>
        );
    }
}