键入React组件工厂函数

鉴于类型

type EnumerableComponentFactory = <C, I>(config: {
  Container: React.ComponentType<C>;
  Item: React.ComponentType<I>;
}) => React.FC<{ items: I[] }>;

具有以下实现

const Enumerable: EnumerableComponentFactory =
  ({ Container, Item }) =>
  ({ items }) =>
    (
      <Container>
        {items.map((props, index) => (
          <Item key={index} {...props} />
        ))}
      </Container>
    );

和预期用途

const UnorderedList = Enumerable({
  Container: ({ children }) => <ul>{children}</ul>,
  Item: ({ title }: { title: string }) => <li>{title}</li>,
});

<UnorderedList items=[{title: "Something"}] />

我观察到以下 TypeScript 错误

Type '{ children: Element[]; }' is not assignable to type 'C'.
  'C' could be instantiated with an arbitrary type which could be unrelated to '{ children: Element[]; }'.ts(2322)
Type '{ children: Element[]; }' is not assignable to type 'C'.
  'C' could be instantiated with an arbitrary type which could be unrelated to '{ children: Element[]; }'.ts(2322)

这引出了我的问题:我需要设置什么类型的约束来解决这个错误?

我试图改变类型如下:

但这会产生一个更加神秘的错误消息,为了简洁起见,我将省略它。


PS 函数本身实际上完全符合预期。只是编译器出了问题。

以上是键入React组件工厂函数的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>