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 模块. 实际上爬虫一共就四个主要步骤: 明确目标 (要知道你准备在哪个范围或者网 ...
随机推荐
- 转: 在CentOS 6.X 上面安装 Python 2.7.X
转:https://ruiaylin.github.io/2014/12/12/python%20update/ 评注: yum -y update //这个更新太坑了,1120更新包...想死的心都 ...
- (转) SYSTEM_HANDLE_INFORMATION中ObjectTypeIndex的定义
typedef struct _SYSTEM_HANDLE_TABLE_ENTRY_INFO{ USHORT UniqueProcessId; USHORT CreatorBackTraceIndex ...
- weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件
1.自定义 过滤函数 src / filters / index.js /** * 自定义 过滤函数 */ export function host (url) { if (!url) return ...
- SpringBoot学习之文件结构和配置文件
Springboot文件结构和配置文件 转载:http://www.zslin.com/web/article/detail/11 项目文件结构 新建的Springboot项目的文件结构如下: |-c ...
- 写2个线程,其中一个线程打印1~52,另一个线程打印A~z,打印顺序应该是12A34B45C……5152Z
我写的 class LN { private int flag = 0; public static char ch = 'A'; public static int n = 1; public sy ...
- 【hdu】Mayor's posters(线段树区间问题)
须要离散化处理,线段树的区间改动问题. 须要注意的就是离散化的时候,由于给的数字是一段单位长度,所以须要特殊处理(由于线段的覆盖和点的覆盖是不一样的) 比方:(1,10)(1,4) (6,10) 离散 ...
- Hadoop源代码分析(完整版)
Hadoop源代码分析(一) 关键字: 分布式云计算 Google的核心竞争技术是它的计算平台.Google的大牛们用了下面5篇文章,介绍了它们的计算设施. GoogleCluster:http:// ...
- [Selenium]通过Selenium实现在当前浏览器窗口点击一个图标之后,弹出另外一个窗口,关闭这个窗口,再回到原来的窗口进行操作
public void clickReportIcon(){ String initialWindowHandle = driver.getWindowHandle(); //保存原始的浏览器窗口 p ...
- struct与 union的基本用法
结构体与联合体是C语言的常见数据类型,可对C的基本数据类型进行组合使之能表示复杂的数据结构,意义深远,是优异代码的必备工具.一. struct与 union的基本用法,在语法上union ...
- 两个月刷完Leetcode前400题经验总结
更新:气死了,挂个傻逼: 每次做个分享.组织个活动,就会有一些傻逼冒泡生怕别人不知道他是傻逼,气死我了!自己好好看看非法集资的概念,我办这个活动,一分钱都没收,入群99元是督促大家完成刷题任务,最后完 ...