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]> /> )}</>
)