React / TypeScript：使用其他属性扩展组件

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使用react重新创建当前的组件（以纯打字稿编写），但是我找不到方法为扩展另一个组件的组件提供额外的支持。

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不相关的道具。我怎样才能做到这一点 ？

回答：

您需要使DataTable通用，以便您可以使用扩展的接口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：使用其他属性扩展组件 的全部内容， 来源链接： utcz.com/qa/408263.html

回到顶部