![5d1e27f5cb6302e5b887371ebb5f2a29.png](https://i-blog.csdnimg.cn/blog_migrate/8072c4f3d78f74cf0fb16ce822e5bb94.jpeg)
思考:我们怎么在组件上面去挂载数据?组件的数据挂载方式?这就是这节我们要做的
下面的课程我们会以教程5里面的例子为基础!!
1、数据挂载的第一种方式:通过 props 传递
例子1--传值情况
App.js 文件:
import
例子2--没有传值的情况
那么咱们可以,在 TodoHeader 里面,它本身是个函数式组件,咱们可以直接用一个 props来接受它。咱们可以 console.log(props)看看,它是什么东西?
(本身应该说是在TodoHeader组件文件下的index.js文件中写如下代码,以后我都简称在TodoHeader里面)
import
它有一个 {title:"待办事项"};
那如果我们什么都不传,它会是什么样的?
App.js 文件:
import
没有错,它会是一个空的对象,{}。
例子3--{props.title} 传值(完整的代码)
App.js 文件:
import
传过来之后,咱们就可以 props点你那边传的一个东西 {props.title},咱们就可以接受到你传过来的东西了。
TodoHeader 文件里面:
import
![ef115d1d82a66ca98316b7447a9e23d0.png](https://i-blog.csdnimg.cn/blog_migrate/81501fb63b39353296ae77d823927162.png)
2、数据挂载的第二种方式:通过 this.props 传递(类组件)
class TodoInput 是类组件,就要通过 this.props 来传递
比如说,我们在 TodoInput 里面添加一个 ADD 按钮,就是我想传递一个按钮上的文字过去。
我们在 button 那里就可以通过 {this.props.btnText} 来获取
例子4
App.js 文件:
import
TodoInput 文件里面: 通过 {this.props.btnText} 来获取
import
![f9ff35bebe097cc4a581ab8438e888bf.png](https://i-blog.csdnimg.cn/blog_migrate/4c1217b480af8ccb0a873a562003a02c.png)
例子5--在TodoHeader 里面,想传递一个子元素进去,怎么办??
TodoHeader 文件:
import
App.js 文件:
import
{desc:"今日事,今日毕",children:"待办事项列表"}
react 里面,children 指的是 组件(标签)里面的内容。
所以,我们要去使用children ,就需要在 TodoHeader 文件里面改为:
import
![7a3221780f33ab368a3b1d234d01c3c7.png](https://i-blog.csdnimg.cn/blog_migrate/744a9f6253c82cd54d746c9b7be42074.png)
那同样的道理,是类组件怎么做呢?用 this.props 来传递就可以了。
完善一下 TodoHeader 文件:
import
![1faaaffa2ef4e6c200152714468398f3.png](https://i-blog.csdnimg.cn/blog_migrate/a3985176540244653916222ae2fee26c.png)
props 的知识点:
可以同过 props 传递任何的东西,包括:方法、数据、数字(要加{ })、author(对象),text(字符串)以及date(日期)...
组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props。
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
例子6--我们说一下 props 传递数字要加{ }的问题
App.js 文件:
import
TodoHeader 文件:
import
![42a65fcaa25ee192bca0efd45b8179c4.png](https://i-blog.csdnimg.cn/blog_migrate/6d3114f510c307b9c011e7d5020261e5.png)
如果你没有加{},是这样写的 x="1" y="2",那出来的结果是:12;这种方式是字符串。
如果你想是数据类型相加,做运算的话,就要加 { },本身数据类型就是JavaScript。
例子7--万一他就是给你传的字符串,而我又需要的是数字,我要相加,怎么办?
这时候,咱们就需要去给 props 做类型的检查,这个时候我们就会抛出一些开发时候的异常。
npm 推荐的一个包:prop-types 来检查开发时候的异常
先安装
npm install --save prop-types
App.js 文件:
import
TodoHeader 文件:
哪里找错,就引哪里:import PropTypes from 'prop-types'
import
这样它就出问题了,当然报错信息很重要,注意看哪里报错了,然后就好改了。
PropTypes 除了检查错误,还可以检查它是否是必须的。
比如说,这里 x 没有传,那么
TodoHeader 文件代码不变
App.js 文件:
import
结果就会有一个 undefined 2,就是第一个参数没有
例子8--我不但希望那个数字是number还是isRequired,它可以链式操作
TodoHeader 文件:
import
这是报错信息就会提醒你,传入的东西就应该是***类型的
一般children是不做检验的
例子9--对于类组件咱们怎么去做检验?
TodoInput 文件:
import
App.js 文件:
import
结果就会报错
例子10--那我不想在组件里面传,可是我又得让它工作,怎么办?那是不是得给它设默认值
App.js 文件:
import
TodoInput 文件:
import
可是在 react 里面不应该这么写
import
在调用的时候,它会有一个优先级(就是默认和传递同时写了的情况),传了的话就使用传递的,没有传的情况就会使用默认值。
props 除了从外部传出去,还可以理解为组件的一个接口,咱们可以通过这个接口来修改组件里面的东西。
所以,TodoHeader 是不是可以写默认值啊
import
所以在 App.js 文件就可以
import
出来的结果就有:如果还有明天
over