前言

在上一章: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和组件参数的更多相关文章

  1. React简单教程-6-单元测试

    前言 我想大部分人的前端测试,都是运行项目,直接在浏览器上操作,看看功能正不正常.虽然明明有测试库可以使用,但是因为"要快"的原因,让好好做测试变成了一件影响效率的事. 因为这种无 ...

  2. React简单教程-4-事件和hook

    前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件,并稍微美化了一下.在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind ...

  3. React简单教程-3-样式

    前言 在上一章 React 简单教程-2-ts 和组件参数 中我们新建的子组件 Displayer 没有样式,显得平平无奇,这一篇我们将给他美化一下. CSS 文件 一般的做法,是在你的组件级目录下新 ...

  4. react开发教程(三)组件的构建

    什么是组件 组件化就好像我们的电脑装机一样,一个电脑由显示器.主板.内存.显卡.硬盘,键盘,鼠标.... 组件化开发有如下的好处:降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快 ...

  5. FusionCharts简单教程(八)-----使用网格组件

            有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...

  6. React简单教程-4.1-hook

    前言 虽然我们简单感受了一下 useState 的用法,但我想你还是对 React 里的 hook 迷迷糊糊的.本文我们将明确下 React 的概念. HOOK 前生今世 在我示例中,写的 React ...

  7. React简单教程-3.1-样式之使用 tailwindcss

    前言 本文是作为一个额外内容,主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架,我在以前的文章里有描述为什么使用功能类优先:为什么我在 css 里使用 ...

  8. React简单教程-5-使用mock

    前言 一个前后端分离的项目,前端人员需要对接后端的接口.如果在后端的接口没有开发好,或者没有测试版可以对接的情况下,前端人员也不能坐等后端接口写好后再开始开发. 一个项目的,理想情况下接口的规范应该是 ...

  9. React简单教程-1-组件

    前言 React,Facebook开发的前端框架.当时Facebook对市面上的前端框架都不满意,于是自己捣鼓出了React,使用后觉得特别好用,于是就在2013年开源了. 我也用React开发了一个 ...

随机推荐

  1. tomcat启动报错:A child container failed during start

    环境:maven3.3.9+jdk1.8+tomcat8.5 错误详细描述: 严重: A child container failed during start java.util.concurren ...

  2. 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 解决办法 - 程序员大本营 ...

  3. 小程序colorui框架引入与使用

    colorui是UI框架:   超好用的一款 小程序二维码体验: :  引入方式: 1.先去下载colorui     https://github.com/weilanwl/ColorUI 把col ...

  4. 基于Apache组件,分析对象池原理

    池塘里养:Object: 一.设计与原理 1.基础案例 首先看一个基于common-pool2对象池组件的应用案例,主要有工厂类.对象池.对象三个核心角色,以及池化对象的使用流程: import or ...

  5. k8s节点执行master命令报错 localhost:8080 was refused

    首先是按照二进制方式安装的k8s. [root@ht22 calico]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) [ ...

  6. linux压缩打包、定时任务

    压缩打包 gzip压缩 win中的压缩包:zip rar Linux常见的压缩包有哪些? gzip bzip2 1.gzip压缩 压缩命令:gzip [压缩文件] 解压命令:gzip -d [压缩包] ...

  7. 【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 ...

  8. Java开发中关于资源路径获取问题

    描述 在开发中经常会读取配置文件,在Web开发中大多数都是在项目路径下.核心的API类或者是Controller异或是jsp页面等,基本都是基于web应用的相对路径,很少去操作绝对路径,但是在客户端. ...

  9. mouseenter 和 mouseover 的区别

    当鼠标移动到元素上时就会触发mouseenter事件 类似mouseover,它们两者之间的差别是 mouseover鼠标经过自身盒子会触发,经过子盒子还会触发.mouseenter只会经过自身盒子触 ...

  10. client 系列

    定义 : client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息.通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等.