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

此时,子组件中div里面的数据依赖于父组件传递过来的数据,那么当父组件没有给子组件传递数据时,子组件div里面就没有了数据了,这显然也不符合我们的预期,我们希望给子组件一个默认值,当父组件传递了数据过来时,就显示父组件传递的数据,当父组件没有传递数据时,子组件也能显示自己的默认值,这就时今天要说的defaultProps。

defaultProps

defaultProps的用法就是,在父子组件传值中,如果父组件调用子组件的时候不给子组件传值,则可以在子组件中使用defaultProps定义的默认值。具体使用方法如下:

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

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

propTypes

在父子组件数据传递中,propTypes也经常被用到,用于在子组件中限定子组件希望得到的数据类型。

在使用的时候,首先需要引入,然后再定义相关数据的类型:

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

defaultProps和propTypes的更多相关文章

  1. [React] Define defaultProps and PropTypes as static methods in class component

    class Toggle extends Component { static propTypes = { defaultOn: PropTypes.bool, on: PropTypes.bool, ...

  2. React之defaultProps、propTypes

    1.新增知识点 /** React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. 父子组件:组件的相互调用中,我们把调 ...

  3. React组件的防呆机制(propTypes)

    Prop验证 随着应用不断变大,为了保证组件被正确使用变得越来越重要.为此我们引入propsTypes.React.PropTypes提供很多验证器(valodator)来验证传入的数据的有效性.当向 ...

  4. React对话框组件实现

    当下前端届最火的技术之一莫过于React + Redux + webpack的技术结合.最近公司内部也正在转react,这周主要做了个React的modal组件,接下来谈下具体实现过程. 基本的HTM ...

  5. [React] Creating a Stateless Functional Component

    Most of the components that you write will be stateless, meaning that they take in props and return ...

  6. React_生命周期

    初始化 ReactDOM.render(jsx, 原生 DOM 对象): 组件类定义 static defaultProps = {} static propTypes = {} constructo ...

  7. React.js小书总结

    (迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...

  8. [转] React 最佳实践——那些 React 没告诉你但很重要的事

    前言:对很多 react 新手来说,网上能找到的资源大都是些简单的 tutorial ,它们能教会你如何使用 react ,但并不会告诉你怎么在实际项目中优雅的组织和编写 react 代码.用谷歌搜中 ...

  9. React.js 小书 Lesson25 - 实战分析:评论功能(四)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...

随机推荐

  1. PyCharm下载安装

    PyCharm 是一款功能强大的 Python 编辑器,具有跨平台性,鉴于目前最新版 PyCharm 使用教程较少,为了节约时间,来介绍一下 PyCharm 在 Windows下是如何安装的. 这是 ...

  2. putty登陆sourceforge.net(设置登录)

    打开putty.exe session选项的host name (ip address) 填写 shell.soureceforge.net 端口22(不变) 接下来是connection选项子目录下 ...

  3. The Microservices Workflow Automation Cheat Sheet

    Written by Bernd Rücker on Dec 12 2018 in the Best Practices category. Editor’s Note: This post orig ...

  4. Road Crossing Game Template 学习

    using UnityEngine; using System; namespace RoadCrossing.Types { /// <summary> /// 小路 /// </ ...

  5. 深入详解美团点评CAT跨语言服务监控(八)报表持久化

    周期结束 我们从消息分发章节知道,RealtimeConsumer在初始化的时候,会启动一个线程,每隔1秒钟就去从判断是否需要开启或结束一个周期(Period),如下源码,如果 value < ...

  6. redis实现与分析-多机数据库

    1.复制,主从结构 redis 2.8以前的复制,由2个步骤 1.初始的同步 2.命令传播 存在问题:同步时出现主从 断线,需要重新发送同步sync信号,非常消耗性能 redis2.8以后新版复制 采 ...

  7. Python问题汇总

    1.dict is not callable tree是一个字典类型. tree("left") -> tree["left"]   2.list ind ...

  8. 代码问题: 【ADNet】

    [ADNet]: Yoo S, Yun K, Choi J Y. Action-Decision Networks for Visual Tracking with Deep Reinforcemen ...

  9. Hadoop HDFS元数据目录分析

    元数据目录分析 在第一次部署好Hadoop集群的时候,我们需要在NameNode(NN)节点上格式化磁盘: $HADOOP_HOME/bin/hdfs namenode -format 格式化完成之后 ...

  10. Hadoop HDFS的shell(命令行客户端)操作实例

    HDFS的shell(命令行客户端)操作实例 3.2 常用命令参数介绍 -help 功能:输出这个命令参数手册 -ls                  功能:显示目录信息 示例: hadoop fs ...