React+TS 从零开始教程(2):简中简 HelloWolrd

源码链接:https://pan.quark.cn/s/c6fbc31dcb02

这一节,我们来见识React+TS的威力,开始上手开发第一个组件,什么组件呢?
当然是简中简的 HelloWolrd组件啦。
在src下创建一个components,然后新建Hello.tsx
image.png
为什么是tsx呢,这个目的就是告诉编译器,我这个文件是支持jsx语法的,如果遇到你看不懂的标签,就当作React Element来处理。
这个组件,我们只有一个要求,就是输入一个属性叫做message,然后展示出来即可。
够简单吧,简直是简中简,弟中弟的组件哈。
但是,依然很有学习的价值。
代码如下:

import React from "react";const Hello = (props:any) => {return <h2>{props.message}</h2>
}export default Hello;

然后,我们在App.tsx中引用这个组件。
image.png
效果:
image.png

改进1.不要any,改成接口

React大道至简的哲学,一个组件就是一个函数,再导出去就完事,没有什么花花肠子。
但是,我们这个组件过于简单了,any我们不推荐使用,所以改成接口来限制组件的传参。

interface IProps {message : string
}const Hello = (props:IProps) => {return <h2>{props.message}</h2>
}

这样一来,使用组件的地方就不能随便传参了。
image.png
看截图,不能传number了,必须string

改进2.FunctionComponents

interface IProps {message ?: string
}const Hello : React.FunctionComponent <IProps> = (props) => {return <h2>{props.message}</h2>
}//给属性设置默认值
Hello.defaultProps = {message: 'Hello world!'
}export default Hello;

React.FunctionComponent 是一种自定义的类型,表示当前组件是函数组件,也可以简写成React.FC
message通过?:变成可选的,并通过Hello.defaultProps给属性设置默认值。然后在调用的地方,就允许不传message了。
image.png

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mp4转换成mp3怎么转?教你几种值得收藏的转换方法!

mp4转换成mp3怎么转&#xff1f;MP4&#xff0c;这一深入人心的数字多媒体容器格式&#xff0c;无疑在当今数字世界中占据了一席之地&#xff0c;那么&#xff0c;它究竟有何过人之处呢&#xff1f;首先&#xff0c;MP4的跨平台兼容性是其一大亮点&#xff0c;不论是在Windows的…

MySQL字典数据库设计与实现 ---项目实战

软件准备✍&#xff1a;Mysql与Navicat可视化命令大全 ----项目实战 文章前言部分 目录 一.摘要 二.设计内容 三.项目实现 一.摘要 本项目关注于字典数据库表结构的设计和数据管理。通过现有的sql文件&#xff0c;实现system_dict_type和system_dict_data两个数据表。随后…

文本批量高效编辑神器:空格秒变分隔符,提升工作效率

在信息爆炸的时代&#xff0c;文本处理已成为我们日常工作中不可或缺的一部分。然而&#xff0c;面对海量的文本数据&#xff0c;如何高效、准确地进行编辑和整理&#xff0c;成为了我们面临的难题。今天&#xff0c;我要向大家介绍一款文本批量高效编辑神器——首助编辑高手&a…

微信小程序轮播图

效果图 详情可见 微信小程序 参照&#xff1a;swiper | uni-app官网 代码&#xff1a; <!--轮播图-- > <swiper interval"2000" autoplay"true" circular"true" style"height: 300px;"><swiper-item style&qu…

Redis—String数据类型及其常用命令详解

文章目录 Redis概述1.Redis-String数据类型概述2.常用命令2.1 SET&#xff1a;添加或者修改已经存在的一个String类型的键值对2.2 GET&#xff1a;根据key获取String类型的value2.3 MSET&#xff1a;批量添加多个String类型的键值对2.4 MGET&#xff1a;根据多个key获取多个Str…

前后端分离项目面试总结

一&#xff1a;是否登录状态 服务端登录的时候&#xff0c;给分配一个session用于存储数据&#xff0c;同时将sessionID返回给浏览器&#xff0c;浏览器通过cookie把sessionID存储起来&#xff0c;下次访问时携带上&#xff0c;服务端就可以通过sessionID来确定用户是否登录。 …

pdf压缩大小,PDF压缩大小不影响清晰度

你是否曾为PDF文件过大而烦恼&#xff1f;想要分享或上传文件时&#xff0c;却因为它的体积而束手无策&#xff1f;别担心&#xff0c;今天我将为大家分享一些简单实用的 PDF 压缩技巧&#xff0c;让你的文件轻松压缩pdf。 打开“轻云处理pdf官网”&#xff0c; 的网站。然后上…

安徽理工大学2计算机考研情况,招收计算机专业的学院和联培都不少!

安徽理工大学&#xff08;Anhui University of Science and Technology&#xff09;&#xff0c;位于淮南市&#xff0c;是安徽省和应急管理部共建高校&#xff0c;安徽省高等教育振兴计划“地方特色高水平大学”建设高校&#xff0c;安徽省高峰学科建设计划特别支持高校&#…

海外注册 | 一分钟看懂英国医疗器械注册

英国医疗器械市场因其独特的地域划分而与其他国家有所不同。分为大不列颠市场&#xff08;包括&#xff1a;英格兰、苏格兰和威尔士&#xff09;和北爱尔兰市场&#xff0c;它们在法规要求上存在细微差别。 以下是针对这两个市场的基本要求概览&#xff1a; 监管机构&#xf…

ONLYOFFICE 编辑器8.1,一个功能全面的编辑器

目录 官网地址&#xff1a;ONLYOFFICE - 企业在线办公应用软件 | ONLYOFFICE 一、PDF编辑 二、PPT播放 1. 多样化的幻灯片样式与布局 2. 强大的文本编辑与格式化功能 3. 丰富的图形与图表插入功能 4. 灵活的过渡效果与动画设置 5. 舒适的呈现与演讲辅助功能 6. 便捷的团…

都说HCIE“烂大街”了,说难考都是假的?

在网络技术领域&#xff0c;华为认证互联网专家&#xff08;HCIE&#xff09;长期以来被视为一项高端认证&#xff0c;代表着专业技能和知识水平。 然而&#xff0c;近几年来&#xff0c;考证的重视度直线上升&#xff0c;考HCIE的人越来越多了&#xff0c;考过的人好像也越来越…

禁用/屏蔽 Chrome 默认快捷键

Chrome 有一些内置的快捷键&#xff0c;但是它并没有像其他软件一样提供管理快捷键的界面。在某些时候&#xff0c;当我们因为个人需求希望禁用 Chrome 某些快捷键时&#xff0c;又无从下手。 好在有开发者开发了 Chrome 插件&#xff0c;可以禁用 Chrome 快捷键的插件&#x…

ogg格式怎么转换为mp3?这四种转换方法非常好用!

ogg格式怎么转换为mp3&#xff1f;在当今数字化时代&#xff0c;音频文件格式的转换已经成为确保音频内容在各种设备和平台上无缝播放的至关重要的一环&#xff0c;尽管OGG格式拥有支持多声道的优势&#xff0c;但由于其使用率相对较低&#xff0c;这可能会在某些情况下导致兼容…

ES内存溢出报错问题解决方案

博主有话说&#xff1a;该博文根据实际案例编写&#xff0c;在编写过程中将敏感信息进行替换&#xff0c;可能存在矛盾的地方&#xff0c;望见谅 1 错误详情 [typecircuit_breaking_exception, reason[parent] Data too large, data for [<http_request>] would be [1256…

javascript语言ES5版本详解(一)

ES6&#xff08;es2015&#xff09; 添加类和模块 ES7&#xff08;es2016&#xff09; 增加指数运算符 (**) 增加 Array.prototype.includes ECMAScript 的一些机能和其他编程语言的类似&#xff1b;特别是 Java&#xff0c;Self&#xff0c;和 Scheme。 ECMAScript 是在宿主环…

1964springboot VUE小程序在线学习管理系统开发mysql数据库uniapp开发java编程计算机网页源码maven项目

一、源码特点 springboot VUE uniapp 小程序 在线学习管理系统是一套完善的完整信息管理类型系统&#xff0c;结合springboot框架uniapp和VUE完成本系统&#xff0c;对理解vue java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c;…

dockercompose部署redis哨兵模式并集成springboot

第一步 编写compose文件 docker-compose.yml version: 3.8networks:redis-network:driver: bridgeservices:redis-master:image: redis:7.2.4container_name: redis-mastercommand: ["sh", "-c", "redis-server --protected-mode no --slave-announ…

Javascript中的this关键字指向

this关键字介绍 不同情况下的this 1.对象调用方法中的this 2.在全局使用this(单独使用) 3.函数中的this 4.函数严格模式下 5.事件中的this 6.构造函数中的this 7.箭头函数没有this call()、apply()、bind() 的用法 this关键字介绍 面向对象语言中 this 表示当前对象…

Java项目:基于SSM框架实现的电子竞技管理平台【ssm+B/S架构+源码+数据库+毕业论文】

一、项目简介 本项目是一套基于SSM框架实现的电子竞技管理平台 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功能…

【C++庖丁解牛】函数栈帧的创建与销毁

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 1. 寄存器2. ebp和esp是如…