typescript可以从React中的并集分配基于索引的泛型类型吗

Question

我有一个React组件，它将泛型类型应用于道具。下面是一个简化的例子：

interface Props<T> {
data: T
}
const MyComponent = <T,>({ data }: Props<T>) => <div /> // output not important

假设我想创建一个组件MyGenericList，它在一个值数组上迭代(每个基于索引的值可以是不同的类型(并呈现MyComponent。

如何键入MyGenericList，使MyComponent的每次迭代都基于基于索引的值的类型进行键入？以下是我迄今为止所做的不起作用的事情：

interface Props<T> {
data: (keyof T[])[];
}
const MyGenericList = <T,>({data}: Props<T>) => {
return (
<>{data.map(d => <MyComponent<how to get index-based generic typing of 'd' here?> data={d} /></>
);
}

MyGenericList的理想消耗如下：

<MyGenericList<string | number | string[]>  data={['someString', 45, ['string', 'string2']} />

Answer 1

我能够通过执行以下操作来实现这一点：

interface Props<T> { data: T[][] };
const MyGenericList = <T,>({ data }: Props<T>) => (
<>{data.map(d => <MyComponent<typeof d[0]> /> )}</>
)