defaultProps和propTypes
在上一篇文章中总结了父子组件的数据传递,下面先来简单的回顾一下之前的内容:



此时,子组件中div里面的数据依赖于父组件传递过来的数据,那么当父组件没有给子组件传递数据时,子组件div里面就没有了数据了,这显然也不符合我们的预期,我们希望给子组件一个默认值,当父组件传递了数据过来时,就显示父组件传递的数据,当父组件没有传递数据时,子组件也能显示自己的默认值,这就时今天要说的defaultProps。
defaultProps
defaultProps的用法就是,在父子组件传值中,如果父组件调用子组件的时候不给子组件传值,则可以在子组件中使用defaultProps定义的默认值。具体使用方法如下:

当父组件中没有传递数据时,显示的就是默认值,


当父组件中传递了数据时,显示的就是传递进来的数据值。


propTypes
在父子组件数据传递中,propTypes也经常被用到,用于在子组件中限定子组件希望得到的数据类型。
在使用的时候,首先需要引入,然后再定义相关数据的类型:

那么当父组件传递的数据不是被期待的数据类型时,数据依然会显示,但是会给出一个警告:


defaultProps和propTypes的更多相关文章
- [React] Define defaultProps and PropTypes as static methods in class component
class Toggle extends Component { static propTypes = { defaultOn: PropTypes.bool, on: PropTypes.bool, ...
- React之defaultProps、propTypes
1.新增知识点 /** React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. 父子组件:组件的相互调用中,我们把调 ...
- React组件的防呆机制(propTypes)
Prop验证 随着应用不断变大,为了保证组件被正确使用变得越来越重要.为此我们引入propsTypes.React.PropTypes提供很多验证器(valodator)来验证传入的数据的有效性.当向 ...
- React对话框组件实现
当下前端届最火的技术之一莫过于React + Redux + webpack的技术结合.最近公司内部也正在转react,这周主要做了个React的modal组件,接下来谈下具体实现过程. 基本的HTM ...
- [React] Creating a Stateless Functional Component
Most of the components that you write will be stateless, meaning that they take in props and return ...
- React_生命周期
初始化 ReactDOM.render(jsx, 原生 DOM 对象): 组件类定义 static defaultProps = {} static propTypes = {} constructo ...
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- [转] React 最佳实践——那些 React 没告诉你但很重要的事
前言:对很多 react 新手来说,网上能找到的资源大都是些简单的 tutorial ,它们能教会你如何使用 react ,但并不会告诉你怎么在实际项目中优雅的组织和编写 react 代码.用谷歌搜中 ...
- React.js 小书 Lesson25 - 实战分析:评论功能(四)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...
随机推荐
- hdoj-4417(做法二 树状数组离线解法,对所有的查询先保存进行排序后有序的查询) 好腻害!
#include<cstdio> #include<cstring> #include<algorithm> using namespace std;; ; str ...
- P1005 矩阵取数游戏(动态规划+高精度)
题目链接:传送门 题目大意: 给定长度为m的数列aj,每次从两端取一个数,得到2k * aj的价值(k为当前的次数,从1开始到m),总共有n行这样的数列,求最大价值总和. 1 ≤ n, m ≤ 80, ...
- HDU 1873 看病要排队 优先队列
Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...
- 04 jsp,EL,JSTL
jsp:Java Server Page 什么是jsp?从用户角度看待 ,就是是一个网页 , 从程序员角度看待 , 其实是一个java类, 它继承了servlet,所以可以直接说jsp 就是一个Se ...
- 浅谈malloc()和free()工作原理
编程之路刚刚开始,错误难免,希望大家能够指出. malloc()和free()是我经常需要用到的函数,一般情况下,C程序使用malloc()在堆上分配内存,free()释放内存,两者的参数和返回值就 ...
- Can’t call setState (or forceUpdate) on an unmounted component 警告处理方法
Can’t call setState (or forceUpdate) on an unmounted component Warning: Can't call setState (or forc ...
- ClusterControl docker 环境搭建
ClusterControl 是一款比较强大的数据库管理平台,包含了丰富的数据库管理功能. 我们可以用来方便的进行数据管理 测试使用docker-compose 管理 环境准备 docker-comp ...
- 使用loki+ mtail + grafana + prometheus server分析应用问题
loki 是一个方便的类似prometheus 的log 系统,mtail 是一个方便的日志提取工具, 可以暴露为http 服务——支持导出prometheus metrics 环境准备 docker ...
- kettle的资源库创建及修改密码
在kettle中的转换或者作业等资源的存储的仓库称为资源库:分为文件资源库.数据库资源库. 一个转换或者作业可以属于某个资源库或者一个单独的文件形态存在. 一.数据库资源库 1.1在mysql中创建一 ...
- 5 个关于 API 中日期和时间设计规则
规则 #1 使用ISO-8601格式作为你的日期格式 ISO 8601 解决了很多问题,包括: 自然排序 - 简单和优雅,免去多余的工作即可实现排序 时区偏移 - 代表用户的地点和时区在日益增长的全球 ...