TS2769: Property 'xxx' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttribute...

2023-11-17

用TypeScript开发React项目,在父子组件间传值时发生错误提示

class Page extends React.Component
{
    render()
    {
        return <div>
                <NavigationBar title="标题"/>
      </div>
    }
}

class NavigationBar extends React.Component
{
    render()
    {
        return <div>
            "返回标题"
        </div>
    }
}

错误提示


No overload matches this call.
  Overload 1 of 2, '(props: Readonly<{}>): NavigationBar', gave the following error.
    Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
      Property 'title' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
  Overload 2 of 2, '(props: {}, context?: any): NavigationBar', gave the following error.
    Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
      Property 'title' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.  TS2769

原因是Typescript是强类型语言,如果要给组件传值,需要在接受值组的地方声明值类型,就本例而言,需要明确定义props,本例为NavigationBarProps

class Page extends React.Component
{
    render()
    {
        return <div>
                <NavigationBar title="标题"/>
      </div>
    }
}

// 定义props类型
interface NavigationBarProps
{
    title:string;
}
class NavigationBar extends React.Component<NavigationBarProps>
{
    render()
    {
        return <div>
            "返回标题"
        </div>
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TS2769: Property 'xxx' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttribute... 的相关文章

随机推荐

  • 分布式、微服务概念

    目录 1 目前软件架构大致分类 2 各种架构技术方法 3 什么是微服务 4 微服务架构特点 5 什么是SOA 6 SOA架构特点 7 SOA架构和微服务架构的区别 8 ESB和微服务API网关 9 什么是分布式 10 什么是集群 11 负载
  • R语言使用cumsum函数计算向量数据的累加和(cumulative sum )

    R语言使用cumsum函数计算向量数据的累加和 cumulative sum 目录 R语言使用cumsum函数计算向量数据的累加和 cumulative sum
  • glsl version 300es 关键字

    参考链接 GLSL ES Specification 3 00 变量名 不能要以gl 开头 注释 或 关键字 void float int uint bool void function name float var name 1 uint
  • JS混淆技术探究及解密方法分析

    随着Web技术的快速发展 JavaScript被广泛应用于网页开发 移动应用开发等领域 然而 JavaScript代码很容易被反编译 解密 这给保护网站和应用程序的安全性带来了严重的挑战 为了解决这个问题 JS混淆技术应运而生 JS混淆就是
  • Redux持久化插件-解决刷新页面数据丢失问题

    最近在使用react的时候有用到redux 对数据进行全局的状态管理 但是发现和vuex一样会出现刷新之后数据丢失的问题 于是在github上面查阅了 redux persist 插件 使用redux persist进行持久化数据存储 通常
  • Rstudio更换主题/样式

    github项目地址 https github com gadenbuie rsthemes 安装 在 rstudio 的控制台console中数据 install packages devtools devtools install gi
  • 为什么会说:程序员年龄越大,越容易失业?

    在程序员的世界里 一直有一个传言 互联网公司没有35岁以上的中年人 从华为辞退34岁以上的员工 到腾讯辞退35 高级员工 似乎老程序员面临着 年龄危机 要时刻警惕在职场被 踢出 的危险 而国内其他很多职业 比如教师 医生 公务员 都在稳步发
  • python TCP通信雷达实时解析数据

    雷达解析程序 coding cp936 import socket import re class jiema def yushe3 self receve r receve av receve v receve h while True
  • 05-分布式计算框架

    目录 一 MapReduce 1 简介 2 原理 2 1 基本概念 2 2 程序执行过程 2 3 作业运行模式 二 Spark 1 简介 1 1 背景 1 2 概念 1 3 特点 2 原理 2 1 编程模型 2 2 运行模式 2 3 运行过
  • Java往字符串数组中追加一个数据

    public class Test public static void main String args 原字符串数组 String arr 原字符串数据1 原字符串数据2 执行数据添加 arr insert arr 需要追加的字符串数据
  • 三菱无机房电梯故障代码查询_【学习】 三菱J、A、K型扶梯介绍(上)

    导 读 抱前段时间我们一直在学习三菱直梯的介绍 今天就为大家分享三菱三种扶梯的介绍 分别为J型 K型和A型 三种扶梯的扶手驱动系统分别是 A型J型为直线式扶手驱动 K型自动扶梯采用摩擦轮式扶手驱动系统 当扶梯的驱动方式不相同时 我们维修的方
  • 解决docker启动mysql无法输入中文以及中文不显示或乱码问题

    前言 我在使用MySQL时 遇到了两个问题 一是在插入中文数据时 无法输入中文 二是在select的时候 查出来的中文数据是空的 因为插入时为空 然后我就使用Navicat连接数据库添加了中文数据 再到docker中查询 就发现了乱码问题
  • LeetCode64. 最小路径和

    题目大意 求出从网络左上角到右下角的一条代价最小的路径和 题目分析 使用动态规划 求出左上角到网络中每个点的代价最小路径和 假设当前要求的是point i j 点 那么它的值就应该是从左上角到它上面那个点point i 1 j 的路径和 与
  • 【技术应用】Qt Creator使用体会与小技巧

    Qt Creator是Qt官方的IDE 这个IDE为Qt编程人员提供了一个完整的开发环境 当然了 这个IDE是用Qt写的 也是免费的 这个IDE真正的编译部分使用了MinGW gcc compiler 也就是说 这个IDE主要的作用是协助开
  • 教务管理系统(免费源码获取)

    项目介绍 本系统使用springboot mybatis plus shiro lombok等技术 使用json传递数据 使用加盐加密对数据进行保存 前端页面使用vue搭建并打包放在static文件夹中 使用token保存当前用户 当用户登
  • chrome浏览器network报错:ERR_CERT_AUTHORITY_INVALID

    转载请注明作者 独孤尚良dugushangliang 出处 https blog csdn net dugushangliang article details 85275319 在访问局域网的某网址时 提示 您的连接不是私密连接 错误代码
  • 算法在ros中应用_烟火检测算法——中伟视界人工智能算法AI在智慧工地、石油中的应用_腾讯新闻...

    烟火检测算法功能说明及实现原理等 一 软件概述 视频智能分析基于目前先进的深度学习算法 通过大量的项目现场素材训练模型 通过本站大量采集的工作服素材 高精度的识别人 安全帽 工作服等识别 本项目主要两方面的算法 一是识别类的 二是行为分析
  • WPF中Datagrid其中一列使用图片显示

    实现效果 实现遇到的问题 当时想要实现如图所示 合格率 所示的效果 我的第一个想法就是使用wpf的转换器 可是接下来问题来了 我这个是通过数值来判断是否合格 什么控件可以做到既可以绑定图片类型的 又可以绑定数值类型的 还有此时的当值绑定肯定
  • 段、页、页框、页表、页表项

    段 页 页框 页表 页表项 分页式虚拟内存 页 页框 页表 页表项 段页式虚拟内存 分段 分页 段 段表 段表项 页 页框 页表 页表项 分页式虚拟内存 页 页框 页表 页表项 页 进程中的块 进程被分成许多大小相同的块 页号 页框 内存中
  • TS2769: Property 'xxx' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttribute...

    用TypeScript开发React项目 在父子组件间传值时发生错误提示 class Page extends React Component render return div div