React 从入门到进阶之路(八)
之前的文章我们介绍了 React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法。接下来我们将介绍 React propTypes defaultProps。
之前我们已经根据 create-react-app 模块创建了一个 React 项目,并定义 App.js 为根组件,即父组件,Home.js 为子组件。我们看一下两个组件的代码:
App.js
import React, {Component} from 'react';
import Home from './components/Home'; class App extends Component {
constructor(props) {
super(props);
this.state = {
title: "I am father",
age: 30,
info: "I like React",
}
} render() {
return (
<div className="App">
<Home title={this.state.title} age={this.state.age}/>
</div>
);
}
} export default App;
Home.js
import React, {Component} from 'react';
import PropTypes from 'prop-types'; class Home extends Component {
constructor(props) {
super(props);
this.state = {
name: "zhangsan",
}
} render() {
return (
<div>
<p>Hello {this.state.name}</p> {/*父组件将 title 传过来*/}
{/*输出结果:I am father*/}
<p>{this.props.title}</p> {/*父组件将 age 传过来,在下面的 defaultProps 中再重新定义*/}
{/*父组件将 age 传过来,在下面的 propTypes 定义 age 必须为 number 类型*/}
{/*输出结果:30*/}
<p>{this.props.age}</p> {/*父组件没有将 info 传过来,在下面的 defaultProps 中定义*/}
{/*输出结果:I like React too*/}
<p>{this.props.info}</p>
</div>
);
}
} Home.defaultProps = {
age: 60,
info: "I like React too",
} Home.propTypes = {
age: PropTypes.number
} export default Home;
在父组件 App.js 中,通过 <Home /> 将子组件 Home 挂载到父组件 App 上,然后将 title 和 age 传递给子组件。
在子组件 Home 中,我们通过 this.props 属性来获取父组件 App 传递过来的值,但是我们在子组件 Home 中定义了一个 defaultProps 属性,并声明了 age 和 info 变量。
在输出结果中我们可以看出:
如果在子组件的 defaultProps 属性中没有更改父组件传递过来的值,那么将按父组件传递过来的值输出,
如果在子组件的 defaultProps 属性中更改了父组件传递过来的值,那么还是按父组件传递过来的值输出,
如果父组件并没有传递过来某值,但是在子组件的 defaultProps 属性中定义了该值,那么将按照定义的值输出。
在子组件 Home 中我们还通过 import PropTypes from ‘prop-types’; 引入了 PropTypes 模块,并定义了一个 propTypes 属性定义了一个 age: PropTypes.number 的约束,那么如果父组件传递过来的 age 如果不是 number 类型的话,则会在控制台报错。
结论:
defaultProps:父子组件传值中,如果父组件调用子组件的时候不给子组件传值,可以在子组件中使用defaultProps定义的默认值
propTypes:验证父组件传值的类型合法性
最后的结果为:
React 从入门到进阶之路(八)的更多相关文章
- React 从入门到进阶之路(四)
之前的文章我们介绍了 React 绑定属性( 绑定class 绑定style).引入图片 循环数组渲染数据.接下来我们将介绍 React 事件,方法, React定义方法的几种方式 获取数据 改 ...
- React 从入门到进阶之路(三)
之前的文章我们介绍了 React 创建组件.JSX 语法.绑定数据和绑定对象.接下来我们将介绍 React 绑定属性( 绑定class 绑定style).引入图片 循环数组渲染数据. 上一篇中我们 ...
- React 从入门到进阶之路(五)
之前的文章我们介绍了 React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值.接下来我们将介绍 React 表单事件 键盘事件 事件对象以及 React中 的 re ...
- React 从入门到进阶之路(七)
之前的文章我们介绍了 React 表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容.接下来我们将介绍 Rea ...
- React 从入门到进阶之路(六)
之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 .双向数据绑定.接下来我们将介绍 React 表单详解 约束性和非约束性组件 inpu ...
- React 从入门到进阶之路(九)
之前的文章我们介绍了 React propTypes defaultProps.接下来我们将介绍 React 生命周期函数. 之前我们已经根据 create-react-app 模块创建了一个 Re ...
- React 从入门到进阶之路(二)
在之前的文章中我们介绍了 React 开发的环境搭建及目录介绍和整理,本篇文章将介绍 React 创建组件.JSX 语法.绑定数据和绑定对象. 之前我们已经将项目运行了起来,我们再来看一下目录结构: ...
- React 从入门到进阶之路(一)
在开始 React 学习之前我们先进入官网 https://react.docschina.org/ 看看官方对 React 的解释:React 是用于构建用户界面的JavaScript 库.我们只需 ...
- Python 爬虫从入门到进阶之路(八)
在之前的文章中我们介绍了一下 requests 模块,今天我们再来看一下 Python 爬虫中的正则表达的使用和 re 模块. 实际上爬虫一共就四个主要步骤: 明确目标 (要知道你准备在哪个范围或者网 ...
随机推荐
- 线性表的顺序存储和链式存储的实现(C)
//线性表的顺序存储 #include <stdio.h>typedef int DataType;#define MaxSize 15//定义顺序表typedef struct { Da ...
- [NPM] Set default values for package.json using npm set
Npm by default uses global values when initializing a new package.json file. Learn how to set your o ...
- jQuery的ajax,当async为false时,同步操作失败。解决方式
引发失败时代码: $.ajax({ url : 'your url', data:{name:value}, cache : false, async : true, type : "POS ...
- 《Java虚拟机原理图解》4.JVM机器指令集
0. 前言 Java虚拟机和真实的计算机一样,执行的都是二进制的机器码:而我们将.java 源码编译成.class 文件,class文件便是Java虚拟机可以认识的二进制机器码,Java可以识别cla ...
- Python开发【迭代器】
1.迭代器 1.1.迭代器创建:指定数据创建迭代器(使用iter()和next() ) x = [1, 2, 3] #定义一个列表:<class 'list'> y = iter(x) # ...
- HDU 6061 RXD and functions NTT
RXD and functions Problem Description RXD has a polynomial function f(x), f(x)=∑ni=0cixiRXD has a tr ...
- xamarin.android Activity之间跳转与传值
前言 由于需要,所以接触到这个新的安卓开发模式,我会把我的学习经历全都记录下来,希望对大家有用. 导读 关于Activity,学习过安卓的人也应该明白什么是Activity,推荐新手去看YZF的这篇文 ...
- Velocity模板引擎笔记
模板引擎中判断对象是否为空: #if(!${jsonObj.data.buyerName} || ${jsonObj.data.buyerName} == '') <p>采 ...
- POJ 3279 Dungeon Master
Dungeon Master Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 21242 Accepted: 8265 D ...
- amazon lightsail
https://51.ruyo.net/6038.html https://aws.amazon.com/cn/lightsail/