React/Typescript: mở rộng một thành phần với các thuộc tính bổ sung

Question

Tôi đang cố gắng sử dụng phản ứng để tạo lại các thành phần dòng điện của tôi (viết bằng chữ in thuần túy) nhưng tôi không thể tìm được cách bổ sung cho một thành phần mở rộng khác.

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

Vấn đề của tôi là tôi cần cung cấp cho AnimalTable một số đạo cụ không liên quan đến DataTable. Làm thế nào tôi có thể làm điều đó ?

Answer 1

Bạn sẽ cần phải thực hiện DataTable generic để bạn sẽ có thể sử dụng một giao diện kéo dài 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 
    } 
}