TS2559: Type ‘{ children: string； }‘ has no properties in common with type ‘IntrinsicAttributes & Fi

大不了找个设计院画图

已于 2022-09-15 16:27:23 修改

阅读量2.4k

点赞数

分类专栏： bug记录文章标签： typescript 前端

于 2022-09-15 16:26:18 首次发布

本文链接：https://blog.csdn.net/weixin_40282133/article/details/126874187

版权

bug记录专栏收录该内容

3 篇文章

订阅专栏

在使用TypeScript开发React函数式组件时，遇到类型不匹配的问题。具体表现为`children`属性在`IntrinsicAttributes & FilterTagPropsType`中未定义。解决方法是为子组件`FilterTag`定义接口，明确其接受的`children`和`key`属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Type '{ children: string; key: string; }' is not assignable to type 'IntrinsicAttributes & FilterTagPropsType'.
Property 'children' does not exist on type 'IntrinsicAttributes & FilterTagPropsType'.ts(2322)

export const Filter: React.FC<PropsType> = ({ title, tags }) => {
  return (
    <div>
      <Text style={{ marginRight: 40, fontSize: 15, fontWeight: 500 }}>
        {title} :{" "}
      </Text>
      {tags.map((t, index) => {
        if (index === tags.length - 1)
          return <FilterTag key={`filter${index}`}>{t}</FilterTag>;  // ====>报错
        return (
          <span key={`filter${index}`}>
            <FilterTag>{t}</FilterTag>
            <Divider type="vertical" />
          </span>
        );
      })}
    </div>
  );
};

解决办法：给子组件FilterTag手动加完善类型：

interface FilterTagPropsType {
  children?: string;
  key?: string;
}

使用 TypeScript 开发 React 函数式组件-云海天教程 (yht7.com)