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游樂場