react学习-react父组件给子组件传值与设置传值类型以及是否必传参数
时间:2019-11-20
本文章向大家介绍react学习-react父组件给子组件传值与设置传值类型以及是否必传参数,主要包括react学习-react父组件给子组件传值与设置传值类型以及是否必传参数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
react 父组件给子组件传参时,父组件直接在引入的子组件内写入要传递的参数即可
<HeaderComponent title={"传递的参数"}></HeaderComponent>
在子组件接收使用props
<div id="header"> {this.props.title} </div>
这样就可以获取到父组件内传递的参数。传参的同时也可以限制传参的类型,这里需要引入一个react的方法prop-types
import PropTypes from 'prop-types';
然后去设置类型,使用组件名点propTypes
class HeaderComponent extends Component { render() { return ( <div id="header"> {this.props.title} </div> ) } } HeaderComponent.propTypes = { //.propTypes是react规定的名称,不可以修改 title: PropTypes.string //设置title的类型 };
react中规定的类型名称如下
这样如果传递的类型不是我们自己规定的类型的话,就会产生报错
同时也可以设置这个值是否必须传递,使用isRequired这个属性
title: PropTypes.string.isRequired
这样就可以规定title这个值必须存在否则产生如下报错
当然设置里这个参数必须传递的情况下,也可以选择不进行传值,这样的话需要设置一个默认值就可以了defaultProps
//设置默认值--->存在默认值情况下必填参数可以不传值,没有默认值必须传值 HeaderComponent.defaultProps = { title: '默认值' };
这样在页面中显示内容就是设置的默认内容
原文地址:https://www.cnblogs.com/nixu/p/11896786.html
- HTTP常见面试题
- Java基础-18(01)总结Map,HashMap,HashMap与Hashtable区别,Collections工具类
- 一个oracle查询引起的bug (r4笔记第59天)
- Java基础-18(02)总结Map,HashMap,HashMap与Hashtable区别,Collections工具类
- 特殊的物化视图刷新 (r4笔记第77天)
- 通过单例模式模拟RAC连接 (r4笔记第76天)
- 网站上的验证码是怎么产生的?
- Java基础-17(01)总结,登录注册案例,Set集合,HashSet
- mongoDB初探第一篇(r4笔记第75天)
- 重温快速排序(r4笔记第73天)
- Java基础-17(01)总结,TreeSet,LinkHashSet
- 海量数据迁移之数据抽取流程 (r4笔记第72天)
- CSS Selectors Level 4新特性全面解析
- 巧用外部表避免大量的insert (r4笔记第71天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用BeautifulSoup 爬取一个页面上的所有的超链接
- 使用PlaceHolder,测试碰见的问题
- 隐藏MySQL InnoDB Cluster / ReplicaSet实例
- MySQL8.0.21——错误日志中的组复制系统消息
- 【一】、搭建Hadoop环境----本地、伪分布式
- 在组复制中指定恢复IP地址
- START GROUP_REPLICATION可以将恢复凭据作为参数
- MySQL Shell转储和加载第1部分:演示!
- MySQL Shell转储和加载第2部分:基准测试
- MySQL Shell转储和加载第3部分:加载转储
- Hadoop【单机安装-测试程序WordCount】
- MySQL Shell转储和加载第4部分:转储实例和模式
- 【创建模式】--工厂模式
- 【创建模式】--Singleton
- Mapreduce 历史服务 配置启动查看