单文件组件的组件传值_教程6——组件的数据挂载-props及prop-types

思考：我们怎么在组件上面去挂载数据？组件的数据挂载方式？这就是这节我们要做的

下面的课程我们会以教程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 

结果

2、数据挂载的第二种方式：通过 this.props 传递（类组件）

class TodoInput 是类组件，就要通过 this.props 来传递

比如说，我们在 TodoInput 里面添加一个 ADD 按钮，就是我想传递一个按钮上的文字过去。

我们在 button 那里就可以通过 {this.props.btnText} 来获取

例子4

App.js 文件：

import 

TodoInput 文件里面： 通过 {this.props.btnText} 来获取

import 

结果

例子5--在TodoHeader 里面，想传递一个子元素进去，怎么办？？

TodoHeader 文件：

import 

App.js 文件：

import 

{desc:"今日事，今日毕",children:"待办事项列表"}

react 里面，children 指的是 组件（标签）里面的内容。

所以，我们要去使用children ，就需要在 TodoHeader 文件里面改为：

import 

结果

那同样的道理，是类组件怎么做呢？用 this.props 来传递就可以了。

完善一下 TodoHeader 文件：

import 

结果

props 的知识点：

可以同过 props 传递任何的东西，包括：方法、数据、数字（要加{ }）、author（对象），text（字符串）以及date（日期）...

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

例子6--我们说一下 props 传递数字要加{ }的问题

App.js 文件：

import 

TodoHeader 文件：

import 

结果

如果你没有加{}，是这样写的 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