当前位置: 首页 > news >正文

React TypeScript 定义组件的各种方式

目录

  • 举例说明
  • 1. 使用 class 定义
  • 2. 使用函数定义
    • 2.1 使用普通函数
    • 2.2 使用函数组件

举例说明

比如我们要定义一个计数器 Counter,它包含一个 label 和一个 button,计数器的初始值由外部传入,点击 button 计数加 1:

在这里插入图片描述

这虽然是个简单组件,但却包含了 React 定义组件的两大核心点:

  1. 属性由外部传入
  2. 状态由内部控制

组件样式:

// counter样式
const counterStyle = {backgroundColor: "orange",width: "100px",height: "100px",borderRadius: "10px",display: "flex",flexDirection: "column",alignItems: "center",justifyContent: "center",
} as React.CSSProperties;

使用组件:

<Counter initialCount={6} />

1. 使用 class 定义

// 属性
type Props = {// 初始countinitialCount: number;
};// 状态
type State = {count: number;
};// 计数器
class Counter extends Component<Props, State> {constructor(props: Props) {super(props);this.state = {count: props.initialCount,};}render() {return (<div style={counterStyle}><p>count={this.state.count}</p><buttononClick={() => {this.setState({count: this.state.count + 1,});}}>1</button></div>);}
}

2. 使用函数定义

2.1 使用普通函数

// 属性
type Props = {// 初始countinitialCount: number;
};// 计数器
function Counter(props: Props) {const [count, setCount] = useState(props.initialCount);return (<div style={counterStyle}><p>count={count}</p><buttononClick={() => {setCount(count + 1);}}>1</button></div>);
}

注:此函数返回的类型是 JSX.Element

2.2 使用函数组件

// 属性
type Props = {// 初始countinitialCount: number;
};// 计数器
const Counter = (props: Props) => {const [count, setCount] = useState(props.initialCount);return (<div style={counterStyle}><p>count={count}</p><buttononClick={() => {setCount(count + 1);}}>1</button></div>);
};

注:此函数返回的类型是 JSX.Element
若需要,可以指定函数返回的具体类型:

// 属性
type Props = {// 初始countinitialCount: number;
};// 计数器
const Counter: React.FC<Props> = (props) => {const [count, setCount] = useState(props.initialCount);return (<div style={counterStyle}><p>count={count}</p><buttononClick={() => {setCount(count + 1);}}>1</button></div>);
};

此时函数的返回值类型是 React.FC<Props>

相关文章:

React TypeScript 定义组件的各种方式

目录 举例说明1. 使用 class 定义2. 使用函数定义2.1 使用普通函数2.2 使用函数组件 举例说明 比如我们要定义一个计数器 Counter&#xff0c;它包含一个 label 和一个 button&#xff0c;计数器的初始值由外部传入&#xff0c;点击 button 计数加 1: 这虽然是个简单组件&…...

互联网摸鱼日报(2023-09-20)

互联网摸鱼日报(2023-09-20) 36氪新闻 国货美妆这五年&#xff1a;押注头部主播&#xff0c;追求极致流量中遭反噬 ​处于水深火热之中的奈飞该如何自救&#xff1f; 一头“灰犀牛”将冲击美国 年轻人花钱的样子变了 金V之后再推橙V&#xff0c;微博正试图重建创作者生态 …...

AWS入列CNCF基金会

7月27日&#xff0c;IT之家曾经报道&#xff0c;微软加入Linux旗下CNCF基金会&#xff0c;在这之后不到一个月的今天&#xff0c;亚马逊AWS也宣布&#xff0c;以铂金身份加入此基金会。 CNCF&#xff0c;全称Cloud Native Computing Fundation&#xff0c;该基金会旨在使得容器…...

岭回归与LASSO回归:解析两大经典线性回归方法

文章目录 &#x1f34b;引言&#x1f34b;岭回归&#xff08;Ridge Regression&#xff09;&#x1f34b;实战---岭回归&#x1f34b;LASSO回归&#xff08;LASSO Regression&#xff09;&#x1f34b;实战---LASSO回归&#x1f34b;岭回归和LASSO哪个更容易是直线&#x1f34b…...

数学建模——微分方程介绍

一、基础知识 1、一阶微分方程 称为一阶微分方程。y(x0)y0为定解条件。 其常规求解方法&#xff1a; &#xff08;1&#xff09;变量分离 再两边积分就可以求出通解。 &#xff08;2&#xff09;一阶线性求解公式 通解公式&#xff1a; 有些一阶微分方程需要通过整体代换…...

Minio入门系列【7】Spring Boot集成Minio

1 前言 之前介绍了如何使用Minio提供的JAVA SDK进行上传和下载文件&#xff0c;在此基础上&#xff0c;我们可以使用spring boot集成Minio JAVA SDK&#xff0c;添加自动配置、装配、客户端管理等功能&#xff0c;简化开发 2 Spring Boot集成Minio 2.1 环境搭建 首先我们搭…...

抖音视频下载.py(23年9月份可用)

声明:仅供学习交流使用!!! 抖音无水印视频下载; 首先登录抖音网页端 打开要下载的视频userId 然后编码实现下载 最后是完整代码,拿走就能用那种: # _*_ coding:utf-8 _*_import json import requests import time import randomheaders = """Accept: a…...

项目基本搭建流程

项目创立&#xff1a;webapp 设置maven 的和settings.xml 的地址 手动建立java文件夹和resource文件夹 一.分层 二.使用generator 来自动建立实体类dao 和dao接口,存放sql文件的xml&#xff1b;并复制到项目中&#xff08;路径可能可以直接设置&#xff09; 三. 配置文件&…...

学习pytorch11 神经网络-非线性激活

神经网络-非线性激活 官网文档常用1 ReLUinplace 常用2 Sigmoid 代码logs B站小土堆学习pytorch视频 非常棒的up主&#xff0c;讲的很详细明白 官网文档 https://pytorch.org/docs/stable/nn.html#non-linear-activations-weighted-sum-nonlinearity 常用1 ReLU 对输入做截断…...

Jenkins学习笔记2

Jenkins下载安装&#xff1a; 从清华源开源镜像站上下载jenkins的安装包&#xff1a; 安装的是这个版本。 关于软件的版本&#xff0c;尽量使用LTS&#xff0c;长期支持。 首先是安装openjdk&#xff1a; yum install fontconfig java-11-openjdk[rootlocalhost soft]# java …...

自动化测试:yaml结合ddt实现数据驱动!

在pythonunittestseleniumddt的框架中&#xff0c;数据驱动常见有以下几种方式实现&#xff1a; Csv/txtExcelYAML 本文主要给大家介绍测试数据存储在YAML文件中的使用场景。首先先来简单介绍一下YAML。 1. 什么是YAML 一种标记语言类似YAML&#xff0c;它实质上是一种通用…...

高效管理,轻松追踪——Chrono Plus for Mac任务管理工具

Chrono Plus for Mac是一款专注于任务管理和跟踪的应用程序。它提供了一种直观、清晰的界面&#xff0c;使您能够轻松创建、安排和分类任务。无论是个人项目还是团队合作&#xff0c;Chrono Plus都能为您提供一种有效组织和管理任务的方式。 这个应用程序具有多种强大的功能&a…...

python项目2to3方案预研

目录 官方工具2to3工具安装参数解释基本使用工具缺陷 future工具安装参数解释基本使用工具缺陷 python-modernize工具安装参数解释基本使用工具缺陷 pyupgrade工具安装参数解释基本使用工具缺陷 对比 官方工具2to3 2to3 是Python官方提供的用于将Python 2代码转换为Python 3代…...

MongoDB 是什么和使用场景概述(技术选型)

一、从NOSQL(Not Only SQL)说起 常见的数据库可以分为下面的两种类型&#xff1a; RDBMS&#xff08;关系型数据库&#xff09;&#xff1a;常见的关系型数据库有 Oracle、DB2、Microsoft SQL Server、Microsoft Access、MySQL&#xff1b;NoSQL&#xff08;非关系型数据库&a…...

打印 pyspark.sql.dataframe.DataFrame 有哪些列

在 PySpark 中&#xff0c;要打印 pyspark.sql.dataframe.DataFrame 的列&#xff0c;可以使用 columns 属性。以下是一个示例代码&#xff1a; from pyspark.sql import SparkSession# 创建 SparkSession spark SparkSession.builder.getOrCreate()# 假设您的 DataFrame 名称…...

什么是虚拟DOM(Virtual DOM)?它在前端框架中的作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是虚拟DOM&#xff08;Virtual DOM&#xff09;&#xff1f;⭐ 虚拟DOM 在前端框架中的作用⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&…...

QT实现简易时钟

头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QDebug> #include <QPainter> #include <QTimerEvent> #include <QTimer> #include <QTime>QT_BEGIN_NAMESPACE namespace Ui { cl…...

win禁用更新,取消windows更新提示,禁用windows自动更新

取消windows自动更新 前言&#xff1a;跟着我的节奏一步一步点下去&#xff0c;就OK 第一步第二步第三步第四步第五步第六步第七步 新建文件第八步 新增文件名称&#xff1a;FlightSettingsMaxPauseDays第九步 设置暂停更新天数第十步 选中你设置的最大值 前言&#xff1a;跟着…...

倒计时列表实现(小程序端Vue)

//rich-text主要用来将展示html格式的&#xff0c;可以直接使用这个标签 <view class"ptBox" v-for"(item,index) in orderList" :key"index"> <rich-text :nodes"item.limit_time|limitTimeFilter"></rich-text>…...

ContentType:application/x-www-form-urlencoded请求方法遇到的坑【PHP】

有些API要求请求的内容类型为application/x-www-form-urlencoded function requestUrl($url,$datanull,$httpstrue,$methodpost){//1.初始化url$ch curl_init($url);//2.设置相关的参数//字符串不直接输出,进行一个变量的存储curl_setopt($ch, CURLOPT_RETURNTRANSFER, true)…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...