React/TypeScript:扩展具有附加属性的组件 [英] React/TypeScript: extending a component with additional properties

问题描述

我正在尝试使用 react 来重新创建我的 currents 组件(用纯打字稿编写)，但我找不到一种方法来为扩展另一个组件的组件提供额外的道具.

I am trying to use react to recreate my currents components (written in pure typescript) but I can't find a way to give additional props to a component extending an other.

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 无关的道具.我怎样才能做到这一点 ?

My problem is that I need to give AnimalTable some props that would be irrelevant to DataTable. How can I do that ?

推荐答案

您需要使 DataTable 通用，以便您能够使用扩展 DataTableProps<的接口/代码>:

You'll need to make DataTable generic so that you'll be able to use an interface which extends 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
    }
}

这篇关于React/TypeScript:扩展具有附加属性的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！