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 模块. 实际上爬虫一共就四个主要步骤: 明确目标 (要知道你准备在哪个范围或者网 ...
随机推荐
- 杭电1863 畅通project
畅通project Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- BUPT复试专题—找K小数(2011)
https://www.nowcoder.com/practice/204dfa6fcbc8478f993d23f693189ffd?tpId=67&tqId=29637&rp=0&a ...
- 线段树区间更新,区间统计+离散化 POJ 2528 Mayor's posters
题意:有一个非常长的板子(10000000长),在上面贴n(n<=10000)张海报.问最后从外面能看到几张不同的海报. 由于板子有10000000长,直接建树肯定会爆,所以须要离散化处理,对于 ...
- weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件
1.自定义 过滤函数 src / filters / index.js /** * 自定义 过滤函数 */ export function host (url) { if (!url) return ...
- uva 11488 - Hyper Prefix Sets(字典树)
H Hyper Prefix Sets Prefix goodness of a set string is length of longest common prefix*number of str ...
- Andrew Ng的机器学习视频文件夹(from coursera, 2014)
第一周: 简单介绍机器学习,有监督学习.无监督学习. 1-1,1-2,1-3,1-4 第二周: 2-1:回归问题举例 2-2:介绍cost function定义. 2-3:在回归函数是一个经过原点的直 ...
- HDU 2049 不容易系列之(4)——考新郎 (递推,含Cmn公式)
不容易系列之(4)——考新郎 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- ElasticSearch远程随意代码运行漏洞(CVE-2014-3120)分析
原理 这个漏洞实际上非常easy,ElasticSearch有脚本运行(scripting)的功能,能够非常方便地对查询出来的数据再加工处理. ElasticSearch用的脚本引擎是MVEL,这个引 ...
- Dom解析XMl文档
XMl文档 <?xml version = "1.0" encoding = "UTF-8"?> <books> <book bo ...
- 关于UISearchBar
iPhone开发之UISearchBar学习是本文要学习的内容,主要介绍了UISearchBar的使用,不多说,我们先来看详细内容.关于UISearchBar的一些问题. 1.修改UISearchBa ...