React+Typescript使用接口泛型处理props

好 刚讲完组件 那么 这次 我们来看一下 数据传递的 props

还是上文的案例 例如 我们想将 title 传给Hello组件
之前我们可以直接这样
在这里插入图片描述
以一个标签属性的形式传过去

而我们在子组件中 这样去使用
在这里插入图片描述
但现在 我们从编辑器中都可以看出 这种写法已经不行了

然后 我们将 hello 组件改成这样

import * as React from "react";

interface IProps {
    title: string
}

export default class hello extends React.Component<IProps> {

    public constructor(props:any){
        super(props);
    }
    public render() {
        return (
            <div>{ this.props.title }</div>
        )
    }
}

其中 最大的不同在于 我们定义了一个接口 IProps
规定里面要有一个 string字符串类型的字段 叫title
然后 挂到 react的Component上进行泛型
然后 这是 我们的父子组件就都不报错了
在这里插入图片描述
在这里插入图片描述
当然 我们可以传多个数据

这里 我们给子组件一个 age 数字 20
在这里插入图片描述
然后子组件规定一下类型
在这里插入图片描述
这里 我们用了Number 说他是个数字类型 那么 我们父组件尝试改成 字符串试试
在这里插入图片描述
很显然 这里就报错了 这也是Ts的一个意义 能够加强代码的规范和可读性

好 最后 父组件代码如下

import Hello from "./components/hello";

function App() {
  return (
    <div className="App">
        hello React Typescript
        <Hello title = "高阶组件" age = { 20 } />
    </div>
  );
}

export default App;

子组件代码

import * as React from "react";

interface IProps {
    title: string,
    age: number
}

export default class hello extends React.Component<IProps,any> {

    public constructor(props:any){
        super(props);
    }
    public render() {
        return (
            <div>
                <div>{ this.props.title }</div>
                <div>{ this.props.age }</div>
            </div>
        )
    }
}

然后 我们运行项目
在这里插入图片描述
也是没有任何问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/85782.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Windows 11 + Ubuntu20.04 双系统 坑里爬起来

ThinkPad x390 安装双系统&#xff0c;原有的磁盘太小&#xff0c;扩充了磁盘重新装系统&#xff0c;出现的问题&#xff0c;加以记录。 1. windows和ubuntu谁先安装&#xff0c;两个都可以&#xff0c;一般建议先安装windows&#xff0c;后安装ubuntu 2. 安装windows后&…

c++--动态规划回文串问题

1.回文子串 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给定一个字符串 s &#xff0c;请计算这个字符串中有多少个回文子字符串。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被视作不同的子串。 示…

无涯教程-Perl - time函数

描述 此函数返回自纪元以来的秒数(对于大多数系统,是1970年1月1日UTC,00:00:00&#xff1b;对于Mac OS,是1904年1月1日,00:00:00)。适用于gmtime和本地时间。 语法 以下是此函数的简单语法- time返回值 此函数返回自纪元后数秒的整数。 例 以下是显示其基本用法的示例代…

如何实现24/7客户服务自动化?建设智能客服知识库

客户自助服务是指用户通过企业或者第三方建立的网络平台或者终端&#xff0c;实现相关的自定义处理。实现客户服务自动化&#xff0c;对提高客户满意度、维持客户关系至关重要。客户服务自动化可以帮助企业以更快的速度和更高的效率来满足客户的售后服务要求&#xff0c;以进一…

ssm助学贷款系统源码和论文

ssm助学贷款系统源码和论文050 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&am…

使用vscode编写插件-php语言

https://blog.csdn.net/qq_45701130/article/details/125206645 一、环境搭建 1、安装 Visual Studio Code 2、安装 Node.js 3、安装 Git 4、安装生产插件代码的工具&#xff1a;npm install -g yo generator-code 二、创建工程 yo code 选择项解释&#xff1a; 选择编写扩…

JVM性能调优

java 如何跨平台&#xff0c;如何一次编译到处执行 是由于java在不同的jvm上编译&#xff0c;jvm在软件层面屏蔽不同操作系统在底层硬件与指令上的区别。 jvm 包括 new 的对象都是放在堆中 栈&#xff0c;给线程单独使用&#xff08;线程私有&#xff09;&#xff0c;存储一个…

Java-进程调度算法

文章目录 为什么要设置进程调度算法&#xff1f;分类1. 先进先出&#xff08;FIFO&#xff09;算法优缺点FIFO代码示例 2. 短作业优先&#xff08;SJF&#xff09;算法优缺点示例代码 3. 优先级算法&#xff08;Priority scheduling&#xff09;优缺点示例代码 4. 时间片轮转算…

Midjourney API 国内申请及对接方式

在人工智能绘图领域&#xff0c;想必大家听说过 Midjourney 的大名吧&#xff01; Midjourney 以其出色的绘图能力在业界独树一帜。无需过多复杂的操作&#xff0c;只要简单输入绘图指令&#xff0c;这个神奇的工具就能在瞬间为我们呈现出对应的图像。无论是任何物体还是任何风…

Docker容器与虚拟化技术:Docker consul 实现服务注册与发现

目录 一、理论 1.Docker consul 二、实验 1.consul部署 2. consul-template部署 三、总结 一、理论 1.Docker consul &#xff08;1&#xff09;服务注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的&#xff0c;不保障高可用性&…

解决Linux虚拟机IP无法显示的问题

目录 问题&#xff1a; 两种解决方案&#xff0c;供大家选择使用哦。 第一种解决办法&#xff1a; 第二种解决办法&#xff1a; 1、查看ens33网卡的配置 2、修改文件 扩展&#xff1a; 问题&#xff1a; Linux命令 ip a 查看ip时&#xff0c;无法显示IP的解决办法。 两…

lnmp(docker)

1. 建立工作目录 [rootdocker ~]# mkdir /opt/nginx [rootdocker ~]# cd /opt/nginx [rootdocker nginx]# rz -E rz waiting to receive. #上传 nginx 安装包 nginx-1.12.0.tar.gz[rootdocker nginx]# rz -E rz waiting to receive. #上传 wordpress 服务包 wordpress-4.9.4-z…

vscode远程调试

安装ssh 在vscode扩展插件搜索remote-ssh安装 如果连接失败&#xff0c;出现 Resolver error: Error: XHR failedscode 报错&#xff0c;可以看这篇帖子vscode ssh: Resolver error: Error: XHR failedscode错误_阿伟跑呀的博客-CSDN博客 添加好后点击左上角的加号&#xff0…

Python功能制作之简单的音乐播放器

需要导入的库&#xff1a; pip install PyQt5 源码&#xff1a; import os from PyQt5.QtCore import Qt, QUrl from PyQt5.QtGui import QIcon, QPixmap from PyQt5.QtMultimedia import QMediaPlayer, QMediaContent from PyQt5.QtWidgets import QApplication, QMainWind…

剪枝基础与实战(1): 概述

本文介绍基于L1正则化的剪枝原理,并以VGG网络进行实战说明。将从零详细介绍模型训练、稀疏化、剪枝、finetune的全过程,提供详细的源码及说明,有助于对剪枝的熟练掌握,后续也会对yolov8进行剪枝的介绍。 论文: Learning Efficient Convolutional Networks through Network …

激活函数总结(十七):激活函数补充(PELU、Phish)

激活函数总结&#xff08;十七&#xff09;&#xff1a;激活函数补充 1 引言2 激活函数2.1 Parametric Exponential Linear Unit&#xff08;PELU&#xff09;激活函数2.2 Phish激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、…

SAP S/4HANA 2022:MRP Live 和 Classic MRP新的增强BADI

翻译一篇&#xff0c;原文在SAP BLOG中如下&#xff1a; 目录 前言通过 BADIs 操作 MRP 元素新的 BadI PPH_SUPPLY_DEMAND_LISTBADI PPH_SUPPLY_DEMAND_LIST 的示例实现结论 前言 SAP S/4HANA 引入了新的 BADI PPH_SUPPLY_DEMAND_LIST&#xff0c;它允许我们在MRP Live 和 C…

2023.8.19-2023.8.XX 周报【人脸3D+虚拟服装方向基础调研-Cycle Diffusion\Diffusion-GAN\】更新中

学习目标 1. 这篇是做diffusion和gan结合的&#xff0c;可以参照一下看看能不能做cyclegan的形式&#xff0c;同时也可以调研一下有没有人follow这篇论文做了类似cyclegan的事情 Diffusion-GAN论文精读https://arxiv.org/abs/2206.02262 2. https://arxiv.org/abs/2212.06…

[足式机器人]Part3机构运动微分几何学分析与综合Ch03-1 空间约束曲线与约束曲面微分几何学——【读书笔记】

本文仅供学习使用 本文参考&#xff1a; 《机构运动微分几何学分析与综合》-王德伦、汪伟 《微分几何》吴大任 Ch01-4 平面运动微分几何学 3.1 空间曲线微分几何学概述3.1.1 矢量表示3.1.2 Frenet标架 连杆机构中的连杆与连架杆构成运动副&#xff0c;该运动副元素的特征点或特…

通过cpolar在外远程查看家里内网监控

通过cpolar在外远程查看家里内网监控 文章目录 通过cpolar在外远程查看家里内网监控前言1. 在cpolar官网预留一个空白隧道2. 完成空白数据隧道&#xff0c;生成地址3. 设置空白隧道的出口4. 空白数据隧道的出口设置5. 获取公网地址6. 打开本地电脑“远程桌面”7. 打开Windows自…