web-dev-qa-db-fra.com

React / TypeScript: extension d'un composant avec des propriétés supplémentaires

J'essaie d'utiliser React pour recréer mes composants courants (écrits en TypeScript pur) mais je ne trouve pas de moyen de donner des accessoires supplémentaires à un composant en prolongeant un autre.

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

Mon problème est que je dois donner à AnimalTable des accessoires qui ne seraient pas pertinents pour DataTable. Comment puis je faire ça ?

reactjstypescript
18
Emarco

Vous devrez rendre DataTable générique pour pouvoir utiliser une interface qui étend 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
    }
}
37
Nitzan Tomer

La solution la plus élégante que j'ai trouvée (sans classe générique supplémentaire) est

interface IBaseProps {
    name: string;
}

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

}

interface IChildProps extends IBaseProps {
    id: number;
}

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