Передача Generi c в React Typescript Component - PullRequest
Новая
       3

Передача Generi c в React Typescript Component

0 голосов
/ 04 марта 2020

Моя цель - вытащить any из реквизита моих столбцов и данных.

Я знаю, что есть способ сделать данные чем-то вроде T[], и тогда рендер может быть что-то вроде (record: T) => void.

Кто-нибудь знает, как сделать это или любую документацию, которая может помочь?

Компонент 

interface Props {
    columns: {
        title: string;
        render: any;
    }[];
    data: any;
}


export class Table extends React.Component<Props> {
    render() {
        return <div>Render Something</div>
    }
}

Использование 

<Table columns={[{title: "", render: record => record.name}]} data={[]} />

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

Единственная информация о T в вашем посте состоит в том, что у него есть поле name, поэтому: 

interface Props<T> {
    columns: {
        title: string;
        render: (record: T) => void;
    }[];
    data: T;
}

interface MyCustomType {
   name: string
}

export class Table extends React.Component<Props<MyCustomType>> {
    render() {
        return <div>Render Something</div>
    }
}

<Table columns={[{title: "", render: record => record.name}]} data={[]} />

Но ваша функция рендеринга при использовании возвращает что-то (независимо от типа record.name есть), а не void.

Кроме того, похоже, что data - это массив (может быть, T[]?), А не T.

Итак, для меня это выглядит примерно так: 

interface Props<T> {
    columns: {
        title: string;
        render: (record: T) => string;
    }[];
    data: T[];
}

interface MyCustomType {
   name: string
}

export class Table extends React.Component<Props<MyCustomType>> {
    render() {
        return <div>Render Something</div>
    }
}

Если вы не знаете, что это за тип MyCustomType, вам придется сделать это any.

Если Вы хотите Таблицу, которую можно создать как «Таблицу», тогда вы можете сделать это: 

export class Table<K> extends React.Component<Props<K>> {
    render() {
        return <div>Render Something</div>
    }
}

Вот как вы это сделаете с обычными Generics. Не уверен, что вы можете поместить это в свой TSX, хотя: 

<Table<MyCustomType> columns={[{title: "", render: record => record.name}]} data={[]} />

Возможно, вам потребуется: 

MyTable = Table<MyCustomType>

<MyTable columns={[{title: "", render: record => record.name}]} data={[]} />
0 голосов
/ 04 марта 2020

Я не могу вспомнить, где я читал об этом, но, как вы также думаете, должно быть возможно определить дженерики в компонентах. А ниже вы можете узнать, как мне это удалось.

Определение: 

interface Props<T> {
   data: T
}

export function Foo<T>({ data }): React.PropsWithChildren<Props<T>>: React.ReactElement | null {
   return (
      <div>{JSON.stringify(data)}</div>
   )
}

Использование: 

...
<MyComp<{ foo: string }> data={{ foo: 'value' }}/>
or
<MyComp<MyType> data={{ foo: 'value' }}/>
...

РЕДАКТИРОВАТЬ: Некоторая документация о решении находится здесь: http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic -type-arguments-in-jsx-elements

...