当前位置: 首页 > 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)…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...