Question

我正在创建一个接受任意值列表的组件和一个将呈现特定值的转换器。值可以是任何类型，因为渲染是由转换器处理的，但编译器抱怨泛型参数。

这是一个最小的例子：

interface MyListParams<T> {
  values: T[];
  transformer: (value: T) => JSX.Element
}

export const MyList: React.FunctionComponent<MyListParam<T>> = ({

}) => <>
    {values.map(transformer)}
  </>

这段代码给了我代码 Cannot find name 'T'. 中的错误 React.FunctionComponent<MyListParam<T>>。

我确实意识到我必须告诉 typescript 这个函数正在使用泛型，但我没有找到这样做的正确位置。

Answer 1

我认为在使用 type 时没有办法将 React.FC 传递给组件，因此您可以尝试：

interface MyListParams<T> {
    values: T[];
    transformer: (value: T) => JSX.Element;
}
  
const MyList = <T extends object>(props: PropsWithChildren<MyListParams<T>>) => <></>;

Answer 2

泛型在接口上 - 意味着你想重用接口。

在您的示例中，您使用的是接口，因此您需要指定其类型：

// T is string
export const MyList: React.FunctionComponent<MyListParams<string>> = ({
values, transformer
}) => <>{values.map(transformer)}</>

如果函数上的泛型看到 official examples（不是函数组件中的真实用例）。

React.FunctionComponent 在打字稿中带有泛型

2 个答案: