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

2023-10-26

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)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TS2559: Type ‘{ children: string; }‘ has no properties in common with type ‘IntrinsicAttributes & Fi 的相关文章

随机推荐

  • 【微服务部署】四、Jenkins一键打包部署NodeJS(Vue)前端项目步骤详解

    本文介绍使用Jenkins一键将NodeJS Vue 前端项目打包并上传到生产环境服务器 这里使用的是直接打包静态页面 发送到远程服务器Nginx配置目录的方式 首先确保服务器环境配置好 安装Nginx 运行目录 日志存放目录等 一 服务器
  • Flutter GetX 状态管理,路由管理,智能依赖注入

    直接上网址 GetX 关于GetX GetX 是 Flutter 上的一个轻量且强大的解决方案 高性能的状态管理 智能的依赖注入和便捷的路由管理 GetX 有3个基本原则 性能 GetX 专注于性能和最小资源消耗 GetX 打包后的apk占
  • java 工具篇(MySQL数据库工具) 数据库实体创建

    第一步 生成工具源代码 package com mysql util import java io File import java io FileWriter import java io IOException import java
  • Linux内核开发三:多进程编程

    1 什么是进程 我们可以通俗地把进程看作是正在运行着的二进制程序 占用内存空间消耗系统资源 例如使用 vim 命令编辑文件内容就会生成一个进程 进程是 OS 资源分配的基本单位 每个进程在操作系统中都执行着特定的任务 如网络服务 etc i
  • shell拷贝mongodb数据库

    拷贝mongodb数据库 mongodump h 服务器IP port 端口 u 用户名 p 密码 d 数据库 o 导出路径 h MongoDB 所在服务器地址 例如 127 0 0 1 当然也可以指定端口号 127 0 0 1 27017
  • VS2019 无法登录 许可证已过期 无法下载许可证

    许可证已过期 点击检查更新的许可证 报出错误 我们无法下载许可证 请检查你的网络连接或代理设置 解决方法 其实问题就在于嵌入式web浏览器的问题 选择账户选项 账户 登录选项 将嵌入式web浏览器改为系统web浏览器 随后就能登录了
  • Android底层驱动开发记录:01_JNI

    最近项目中需要用到了Android底层的开发 正好疫情居家所以又把韦老师的老教程第四期Android教程翻出来学习学习 手边也没有合适的板子 找了一块AIO 3288C的板子接了一块HDMI的屏来用 本来之前一直做单片机的 因此学起来还比较
  • 宝塔漏洞复现

    声明 好好学习 天天向上 漏洞描述 宝塔面板是一款服务器管理软件 支持windows和linux系统 可以通过Web端轻松管理服务器 提升运维效率 例如 创建管理网站 FTP 数据库 拥有可视化文件管理器 可视化软件管理器 可视化CPU 内
  • QT中的信号和槽函数

    一 信号和槽机制 1 概念 信号和槽是Qt中自行定义的一种通信机制 实现对象之间的交互 当某个对象发生改变时将会发送信号 该信号可以被其它对象接收 接收以后将执行一个指定的成员函数 槽函数 图解 2 定义 1 包含信号或槽的类必须是QObj
  • GET请求与POST请求的区别

    1 安全性 GET请求通过拼接url传递参数 会在url地址栏显示 相对不安全 POST请求通过body体传递参数 不会在url地址栏中显示 相对安全 2 传输数据大小 GET请求对传输的数据大小有限制 最多2K POST请求对传输的数据大
  • 练手小项目:51单片机控制的智能台灯设计(自动感应调光) 电路图,测试图,源代码全技术资料

    功能及概述 本系统组成如图一所示 主要由三部分组成 传感器及信号处理部分 检测人体辐射红外信号及光强信号经过处理后变成可处理的数字信号 以80C51组成的中央处理单元 处理信号并发出控制命令 提醒电路及灯光控制电路 给出提醒信号并根据80C
  • vue3基础 ---- 上

    目录 一 vue3介绍 1 官网初识 2 环境搭建 2 1 线上尝试 2 2 CDN使用 2 3 Vue CLI 2 4 Vite 二 vue3基础 1 模板语法 1 1 我的第一个vue应用 1 2 应用背后的真相 1 3 模板语法 新的
  • API 治理的目标是什么?

    建立有效的API治理需要正确理解其目标 但它究竟是什么呢 是定义标准或规则并应用它们吗 都不是 虽然这些是治理的一个重要手段 但这并非其最终目的 为了揭示API治理的真正目标 让我们探讨一下在适当地制定标准后能得到什么 1 从 API 混乱
  • Jetty服务器好处

    Jetty可以同时处理大量连接而且可以长时间保持连接 适合于web聊天应用等等 Jetty的架构简单 因此作为服务器 Jetty可以按需加载组件 减少不需要的组件 减少了服务器内存开销 从而提高服务器性能 Jetty默认采用NIO结束在处理
  • python中sys是什么意思_python里的sys是什么意思

    sys模块功能多 我们这里介绍一些比较实用的功能 相信你会喜欢的 和我一起走进python的模块吧 sys模块的常见函数列表 sys argv 实现从程序外部向程序传递参数 sys exit arg 程序中间的退出 arg 0为正常退出 s
  • ubuntu配置mysql网络连接_在Ubuntu14.04中配置mysql远程连接教程

    上一篇文章 小编带大家学会了在Ubuntu14 04中安装MySQL 没有来得及上课的小伙伴们可以戳这篇文章 如何在Ubuntu14 04中安装mysql 今天给大家分享一下 如何简单的配置MySQL 可以实现远程连接 具体的教程如下 1
  • 代码雨类库的实现

    代码雨类库的实现 电影黑客帝国有个代码雨效果 挺酷的 我在网上看到了使用js写的代码雨的代码 我把由函数实现的代码 改为使用类实现代码雨特效 一 设计一个简单美化的网页且包含该有的功能 功能 1 一块画布 实现代码雨的展示 2 初始化按钮
  • 字节跳动第五届青训营后端练习题——分割ip(Java版)

    题目 有效 IP 地址正好由四个整数 每个整数位于 0 到 255 之间组成 且不能含有前导 0 整数之间用 分隔 例如 0 1 2 201 和 192 168 1 1 是有效 IP 地址 但是 0 011 255 245 192 168
  • nginx 反向代理常用配置

    全部代理 location 设置跨域 add header Access Control Allow Origin add header Access Control Allow Methods GET POST OPTIONS add h
  • TS2559: Type ‘{ children: string; }‘ has no properties in common with type ‘IntrinsicAttributes & Fi

    Type children string key string is not assignable to type IntrinsicAttributes FilterTagPropsType Property children does