Typescript 围绕使用 generics 使用扩展 {} 的错误

Question

type List<T> = {
  items: T[];
  clickHandler: (a: T) => void;
};

const List = <T extends {}>({
  items,
  clickHandler,
}: List<T>) => {
  return (
    <div>
      {items.map((item, index) => (
        <div key={index} onClick={() => clickHandler(item)}>
          {item} // error is showing here
        </div>
      ))}
    </div>
  );
};

export default List;

typescript 错误类型“T”不可分配给类型“ReactNode”。 类型“{}”不可分配给类型“ReactNode”。 类型“T”不可分配给类型“ReactPortal”。 类型“{}”缺少类型“ReactPortal”中的以下属性：key、children、type、propsts(2322)

Answer 1

您似乎想要呈现 T 类型的项目。您必须确保反应 T 是“可呈现类型”。

一种方法是：

const List = <T extends ReactNode>

更多信息在这里

Answer 2

由于您将项目呈现为div的子项，因此您也可以将其定义为

const List = <T extends JSX.IntrinsicElements['div']['children']>(

内部定义为React.ReactNode的结果与@Svetoslav Retkov 的答案相同

TS游乐场