使用扩展使用泛型时出现打字脚本错误{}

ryevplcw  于 2022-10-02  发布在  Java
关注(0)|答案(2)|浏览(120)
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;

TypeScrip错误类型‘T’不可分配给类型‘ReactNode’。类型‘{}’不可赋值给类型‘ReactNode’。类型‘T’不可赋值给类型‘ReactPortal’。类型‘{}’缺少类型‘ReactPortal.’的以下属性:键、子项、类型、属性(2322)

m4pnthwp

m4pnthwp1#

看起来你想呈现类型T的项目,你必须确保ReactT是“可呈现类型”。

实现这一点的一种方法是:

const List = <T extends ReactNode>

更多信息here

xmjla07d

xmjla07d2#

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

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

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

TSPlayground

相关问题