Dynami c generi c для аргумента проп в компоненте React - PullRequest
Новая
       1

Dynami c generi c для аргумента проп в компоненте React

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

Я создал пользовательский компонент React таблицы, который помогает мне представить несколько массивов карт с различными полями, определенными в JavaScript, я перемещаю свою кодовую базу в Typescript, чтобы использовать типы, но у меня возникают проблемы с этим компонентом, Я решил использовать дженерики, но с этим тоже сталкиваюсь с проблемами в отношении tsc:

Аргумент типа 'string' не может быть назначен параметру типа 'keyof T'. Тип 'string' нельзя назначить типу '"idx" | "ID" '.

Вот минимальный пример, который воспроизводит то, что я вижу с кодом моего компонента: 

import React from 'react'

interface MyTableProps<T> {
    arr: Array<T>
    fields: Array<string>
}

const getProperty = <T, K extends keyof T>(obj: T, key: K) => {
    return obj[key]
}

const MyTable = <T extends { idx?: string | number; ID?: string | number }>({ arr, fields }: MyTableProps<T>) => {
    return (
        <table>
            <thead>
                <tr>
                    {fields.map(field => (<th key={field}>{field}</th>))}
                </tr>
            </thead>
            <tbody>
                {arr.map(row => (
                    <tr key={row.idx || row.ID}>
                        {
                            fields.map(field => (
                                <td key={"td"+field}>{getProperty(row, field)}</td>
                            ))
                        }
                    </tr>
                ))}
            </tbody>
        </table>)
}

Приведенная выше ошибка происходит от getProperty Второй аргумент функции.

Мой вопрос: что мне нужно сделать, чтобы иметь динамический c generi c тип для аргумента проп в моем компоненте React?

1 Ответ

1 голос
/ 07 марта 2020

Попробуйте использовать это для MyTableProps<T>: 

interface MyTableProps<T> {
    arr: Array<T>
    fields: Array<keyof T>
}
...