web-dev-qa-db-ja.com

React / TypeScript：追加のプロパティでコンポーネントを拡張する

私は、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とは無関係な小道具をいくつか与える必要があることです。どうやってやるの ？

reactjstypescript
18
Emarco

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
    }
}
37
Nitzan Tomer

私が見つけた最もエレガントなソリューションは（余分なジェネリッククラスなしで）

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