React简单教程-2-ts和组件参数
前言
在上一章:React 简单教程-1-组件 我们知道了 React 的组件是什么,长什么样,用 js 和 HTML 小小体验了一下组件。在这一章,我们将使用 typescript
(简称 ts) 来代替 js,这种语法的文件名后缀是 tsx
。
我强烈建议使用 ts 来开发 React,要说 ts 比 js 好在哪里?这么说,js 唯一不好的地方就是它只能用 js 来写。
如果你不会 ts,那么你可以稍微地学习一下,官网:typescript,能够看懂一些基本语法就可以了,我们会在编写代码的过程中慢慢学习。
新建 React-ts 项目
现在,忘了我们在上一章创建的项目吧,我们要重新创建一个使用 ts 开发的 React 项目。创建的方式其实和我们上一章的方式相同,在终端输入命令,但有一点不一样:
npm create vite@latest my-react-app -- --template react-ts
在最后面指定模板的参数,我们使用的是 react-ts
,表示是一个 react 项目,且用 ts 开发。
进入到文件夹,应该会看到如下的目录结构:
这个文件结构我们还是很熟悉的,不过我们能够注意到,在上一章中我们写代码的组件文件名从 App.jsx
变成了 App.tsx
,说明使用的是 ts
语言来开发。按照上一章的步骤,执行 npm i
安装依赖包,然后执行 npm run dev
来启动开发服务器,在浏览器中打开地址 http://localhost:3000/。
你可以在 App.tsx
中随意修改你的代码。这些步骤都跟我们在上一章中相同。
参数传递
组件可以接收其他组件传递过来的参数。比如说父组件中有一个值,这个值需要传递给子组件显示,那么子组件要这么接收这个值呢?
我们先新建一个子组件吧,这个组件用于显示值,就叫 displayer.tsx
吧。
export function Displayer() {
return <div></div>;
}
这个组件要可以接收传进来的参数,只需要在它的入参里写上 props
即可。
export function Displayer(props) {
return <div></div>;
}
这个名字是约定的,所以不能写错。它的类型是一个对象,所有传递进来的参数都是 props
的属性。比如说,外部传递进来了一个参数叫 name
,那么我们使用这个参数的写法就是:
export function Displayer(props) {
// 像这样获取,因为所有的传递给组件的参数都是 props 的属性
const name = props.name;
return <div></div>;
}
然后,我们把这个参数的值,在返回的 html 里使用,要用花括号括起来,表示使用这个变量,不然会被识别为字面量:
export function Displayer(props) {
const name = props.name;
return (
<div>
<div>可以这么使用变量:{name}</div>
<div>也可以直接使用:{props.name}</div>
<div>没有花括号则被当作是字面量:props.name</div>
</div>
);
}
然后,如同我们上一章学的,在父组件中使用子组件,这里我们的父组件是 App
。
import { Displayer } from "./displayer";
function App() {
return (
<div>
{/*使用子组件*/}
<Displayer />
</div>
);
}
我们还没有在父组件里给子组件传递参数,传递参数的方式也非常简单,就跟 html 的属性一样,直接写上子组件的参数名:
import { Displayer } from "./displayer";
function App() {
return (
<div>
{/*使用子组件,传递参数*/}
<Displayer name="My name is App" />
</div>
);
}
注意传递参数是直接写参数名,不需要写 props
,在子组件里使用时才需要写 props
。
我们启动看看效果,如下:
可以看到父组件的参数成功传递到了子组件并显示。
如果传递更多的参数的话也是一样的写法,我在下方做示例,同时给我们的 props
参数添加上类型,以方便的知道子组件能够传递什么参数,这也是使用 ts 的便捷之处。
// 子组件
export function Displayer(props: { name: string, content: string }) {
const name = props.name;
const content = props.content;
return (
<div>
<div>{name}</div>
<div>{content}</div>
</div>
);
}
// 父组件
import { Displayer } from "./displayer";
function App() {
return (
<div>
<Displayer name="My name is App" content="My content is Aoh!!!" />
</div>
);
}
效果如下:
当然,我们可以随意得把玩子组件,学习的方式之一就是用各种方式来把玩,我们可以在父组件中多用几次子组件:
// 父组件
import { Displayer } from "./displayer";
function App() {
return (
<div>
<Displayer name="My name is App1" content="My content is Aoh!!!1" />
<Displayer name="My name is App2" content="My content is Aoh!!!2" />
<Displayer name="My name is App3" content="My content is Aoh!!!3" />
<Displayer name="My name is App4" content="My content is Aoh!!!4" />
</div>
);
}
那么你就能看到如下效果:
警告
如果这么写会怎么样???
// 在组件中引用它自己
// 不要这么写
export function Displayer(props: { name: string, content: string }) {
const name = props.name;
const content = props.content;
return (
<div>
<div>{name}</div>
<div>{content}</div>
{/* 会发生什么事??? */}
<Displayer name="My name is Sub1" content="My content is Error!!!1" />
</div>
);
}
总结
在本文中,我们学会了组件如何传递参数。但是我们的子组件还没有任何样式,下一篇中我们将给它加上样式,让它看起来好看一些。
参考资料
组件 & Props by React
React简单教程-2-ts和组件参数的更多相关文章
- React简单教程-6-单元测试
前言 我想大部分人的前端测试,都是运行项目,直接在浏览器上操作,看看功能正不正常.虽然明明有测试库可以使用,但是因为"要快"的原因,让好好做测试变成了一件影响效率的事. 因为这种无 ...
- React简单教程-4-事件和hook
前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件,并稍微美化了一下.在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind ...
- React简单教程-3-样式
前言 在上一章 React 简单教程-2-ts 和组件参数 中我们新建的子组件 Displayer 没有样式,显得平平无奇,这一篇我们将给他美化一下. CSS 文件 一般的做法,是在你的组件级目录下新 ...
- react开发教程(三)组件的构建
什么是组件 组件化就好像我们的电脑装机一样,一个电脑由显示器.主板.内存.显卡.硬盘,键盘,鼠标.... 组件化开发有如下的好处:降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快 ...
- FusionCharts简单教程(八)-----使用网格组件
有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...
- React简单教程-4.1-hook
前言 虽然我们简单感受了一下 useState 的用法,但我想你还是对 React 里的 hook 迷迷糊糊的.本文我们将明确下 React 的概念. HOOK 前生今世 在我示例中,写的 React ...
- React简单教程-3.1-样式之使用 tailwindcss
前言 本文是作为一个额外内容,主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架,我在以前的文章里有描述为什么使用功能类优先:为什么我在 css 里使用 ...
- React简单教程-5-使用mock
前言 一个前后端分离的项目,前端人员需要对接后端的接口.如果在后端的接口没有开发好,或者没有测试版可以对接的情况下,前端人员也不能坐等后端接口写好后再开始开发. 一个项目的,理想情况下接口的规范应该是 ...
- React简单教程-1-组件
前言 React,Facebook开发的前端框架.当时Facebook对市面上的前端框架都不满意,于是自己捣鼓出了React,使用后觉得特别好用,于是就在2013年开源了. 我也用React开发了一个 ...
随机推荐
- tomcat启动报错:A child container failed during start
环境:maven3.3.9+jdk1.8+tomcat8.5 错误详细描述: 严重: A child container failed during start java.util.concurren ...
- Unknown host mirrors.opencas.cn You may need to adjust the proxy settings in Gradle 报错及解决办法
亲测Unknown host mirrors.opencas.cn You may need to adjust the proxy settings in Gradle 解决办法 - 程序员大本营 ...
- 小程序colorui框架引入与使用
colorui是UI框架: 超好用的一款 小程序二维码体验: : 引入方式: 1.先去下载colorui https://github.com/weilanwl/ColorUI 把col ...
- 基于Apache组件,分析对象池原理
池塘里养:Object: 一.设计与原理 1.基础案例 首先看一个基于common-pool2对象池组件的应用案例,主要有工厂类.对象池.对象三个核心角色,以及池化对象的使用流程: import or ...
- k8s节点执行master命令报错 localhost:8080 was refused
首先是按照二进制方式安装的k8s. [root@ht22 calico]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) [ ...
- linux压缩打包、定时任务
压缩打包 gzip压缩 win中的压缩包:zip rar Linux常见的压缩包有哪些? gzip bzip2 1.gzip压缩 压缩命令:gzip [压缩文件] 解压命令:gzip -d [压缩包] ...
- 【Azure API 管理】解决API Management添加AAD Group时遇见的 Failed to query Azure Active Directory graph due to error 错误
问题描述 为APIM添加AAD Group时候,等待很长很长的时间,结果添加失败.错误消息为: Write Groups ValidationError :Failed to query Azure ...
- Java开发中关于资源路径获取问题
描述 在开发中经常会读取配置文件,在Web开发中大多数都是在项目路径下.核心的API类或者是Controller异或是jsp页面等,基本都是基于web应用的相对路径,很少去操作绝对路径,但是在客户端. ...
- mouseenter 和 mouseover 的区别
当鼠标移动到元素上时就会触发mouseenter事件 类似mouseover,它们两者之间的差别是 mouseover鼠标经过自身盒子会触发,经过子盒子还会触发.mouseenter只会经过自身盒子触 ...
- client 系列
定义 : client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息.通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等.