之前的文章我们介绍了 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 从入门到进阶之路(八)的更多相关文章

  1. React 从入门到进阶之路(四)

    之前的文章我们介绍了  React 绑定属性( 绑定class  绑定style).引入图片  循环数组渲染数据.接下来我们将介绍 React 事件,方法, React定义方法的几种方式 获取数据 改 ...

  2. React 从入门到进阶之路(三)

    之前的文章我们介绍了 React 创建组件.JSX 语法.绑定数据和绑定对象.接下来我们将介绍 React 绑定属性( 绑定class  绑定style).引入图片  循环数组渲染数据. 上一篇中我们 ...

  3. React 从入门到进阶之路(五)

    之前的文章我们介绍了  React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值.接下来我们将介绍 React 表单事件 键盘事件 事件对象以及 React中 的 re ...

  4. React 从入门到进阶之路(七)

    之前的文章我们介绍了 React 表单详解 约束性和非约束性组件 input text checkbox radio  select  textarea  以及获取表单的内容.接下来我们将介绍 Rea ...

  5. React 从入门到进阶之路(六)

    之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 .双向数据绑定.接下来我们将介绍 React 表单详解 约束性和非约束性组件 inpu ...

  6. React 从入门到进阶之路(九)

    之前的文章我们介绍了 React propTypes  defaultProps.接下来我们将介绍 React 生命周期函数. 之前我们已经根据 create-react-app 模块创建了一个 Re ...

  7. React 从入门到进阶之路(二)

    在之前的文章中我们介绍了 React 开发的环境搭建及目录介绍和整理,本篇文章将介绍 React 创建组件.JSX 语法.绑定数据和绑定对象. 之前我们已经将项目运行了起来,我们再来看一下目录结构: ...

  8. React 从入门到进阶之路(一)

    在开始 React 学习之前我们先进入官网 https://react.docschina.org/ 看看官方对 React 的解释:React 是用于构建用户界面的JavaScript 库.我们只需 ...

  9. Python 爬虫从入门到进阶之路(八)

    在之前的文章中我们介绍了一下 requests 模块,今天我们再来看一下 Python 爬虫中的正则表达的使用和 re 模块. 实际上爬虫一共就四个主要步骤: 明确目标 (要知道你准备在哪个范围或者网 ...

随机推荐

  1. 杭电1863 畅通project

    畅通project Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  2. BUPT复试专题—找K小数(2011)

    https://www.nowcoder.com/practice/204dfa6fcbc8478f993d23f693189ffd?tpId=67&tqId=29637&rp=0&a ...

  3. 线段树区间更新,区间统计+离散化 POJ 2528 Mayor&#39;s posters

    题意:有一个非常长的板子(10000000长),在上面贴n(n<=10000)张海报.问最后从外面能看到几张不同的海报. 由于板子有10000000长,直接建树肯定会爆,所以须要离散化处理,对于 ...

  4. weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件

    1.自定义  过滤函数 src / filters / index.js /** * 自定义 过滤函数 */ export function host (url) { if (!url) return ...

  5. uva 11488 - Hyper Prefix Sets(字典树)

    H Hyper Prefix Sets Prefix goodness of a set string is length of longest common prefix*number of str ...

  6. Andrew Ng的机器学习视频文件夹(from coursera, 2014)

    第一周: 简单介绍机器学习,有监督学习.无监督学习. 1-1,1-2,1-3,1-4 第二周: 2-1:回归问题举例 2-2:介绍cost function定义. 2-3:在回归函数是一个经过原点的直 ...

  7. HDU 2049 不容易系列之(4)——考新郎 (递推,含Cmn公式)

    不容易系列之(4)——考新郎 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  8. ElasticSearch远程随意代码运行漏洞(CVE-2014-3120)分析

    原理 这个漏洞实际上非常easy,ElasticSearch有脚本运行(scripting)的功能,能够非常方便地对查询出来的数据再加工处理. ElasticSearch用的脚本引擎是MVEL,这个引 ...

  9. Dom解析XMl文档

    XMl文档 <?xml version = "1.0" encoding = "UTF-8"?> <books> <book bo ...

  10. 关于UISearchBar

    iPhone开发之UISearchBar学习是本文要学习的内容,主要介绍了UISearchBar的使用,不多说,我们先来看详细内容.关于UISearchBar的一些问题. 1.修改UISearchBa ...