React——props的使用以及propTypes
组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素
一.props的使用
1.一些组件并不需要知道自己的children,尤其是像Sidebar和Dialog这通用'boxes'的组件。在这些组件中,我们推荐使用特别的children props直接将孩子元素传递到组件中。
function FancyBorder(props){
return(
<div>
{props.children}
</div>
)
}
function WelcomeDialog(props){
return <FancyBorder>
<h1>Welcome</h1>
<p>Thank you for visiting our spacecraft!</p>
</FancyBorder>
}
在<FancyBorder>中的任何tag都将作为children props传递到FancyBorder组件中
2.你除了可以通过children props直接向组件中传递子元素,你也可以按照你自己的习惯,而不是使用children
function FancyBorder(props){
return <div>
{props.top}
{props.bottom}
</div>
}
function WelcomeDialog(props){
return <FancyBorder top={<Top/>} bottom={<Bottom/>} />
}
function Top(props){
return <p> I am top</p>
}
function Bottom(props){
return <p>I am bottom</p>
}
因为React元素(如:<Top>,<Bottom>)只是对象,所以可以将它们作为props传递到其他组件中
3.在某些情况下可能需要基于一个普通的组件创建出一个特别的组件。如通过Dialog组件创建出WelcomeDialog组件。在这里我们可以通过配置Dialog组件的props创建出特别的
WelcomeDialog组件。
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
} function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" />
);
}
二.propTypes
从React15.5起,React.PropTypes被移入到单独的package中。react提供了一个package(prop-types)去检查props的类型。首先需要将prop-types引用到文件中。
import PropTypes from 'prop-types'
PropTypes暴露了一系列能够确定接受的props是否合法的验证器,出于性能的考虑,PropTypes在开发模式下才会起作用
import PropTypes from 'prop-types'
class Greeting extends React.Component{
render(){
return <div>welcome,{this.props.name}</div>
}
}
Greeting.propTypes = {
name:PropTypes.string
}
prop-types提供了大量的验证器,举例如下:
import PropTypes from 'prop-types'
myComponent.propTypes = {
// 数组
optionalArray: PropTypes.array,
// 布尔值
optionalBool: PropTypes.bool,
// 函数
optionalFunc: PropTypes.func,
// 数值
optionalNumber: PropTypes.number,
// 对象
optionalObject: PropTypes.object,
// 字符串
optionalString: PropTypes.string,
// symbol
optionalSymbol: PropTypes.symbol,
// 能够被渲染的数值,字符串,元素或者包含这些类型的数组
optionalNode: PropTypes.node,
// React元素
optionalElement: PropTypes.element,
// optionalMessage是Message类的实例
optionalMessage: PropTypes.instanceOf(Message),
// optionalEnum为['News', 'Photos']中的其中一个
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
//optionalUnion要么为字符串,要么为数值,要么为Message实例
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// optionalArrayOf是数值类型的数组
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// optionalObjectOf的属性是数值
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// requiredFunc是函数,且必须提供。isRequired可以链接到任何值后面
requiredFunc: PropTypes.func.isRequired,
// requiredAny可以是任何类型,且必须提供
requiredAny: PropTypes.any.isRequired,
// 自定义验证器。customProp中必须包含matchme
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 自定义数组,对象类型的验证器
// 验证器会调用数组或者对象中的每一个值
// customArrayProp中的每一个值都要包含matchme
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
}
给props指定默认值
通过组件的defaultProps属性可以给组件的props指定默认值
import PropTypes from 'prop-types'
class Greeting extends React.Component{
render(){
return <div>welcome,{this.props.name}</div>
}
}
Greeting.defaultProps = {
name:'lili'
}
React——props的使用以及propTypes的更多相关文章
- React组件属性部类(propTypes)校验
React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...
- React中静态类型校验 - PropTypes
1.基本说明PropTypes定义为组件类自身的属性,用以定义prop的类型.在开发模式下,当提供一个不合法的值作为prop时,控制台会出现警告: 在产品模式下,为了性能考虑应忽略propTypes ...
- react Props 验证 propTypes,
<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...
- react~props和state的介绍与使用
props是参数的传递,从上层模块向下层模块进行拿传递:而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值. props Reac ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes
转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...
- react props与render成员函数
props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...
- React props
class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...
- React props传变量
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
随机推荐
- 怎么检测JDK环境变量是否配置正确
怎么检测JDK环境变量是否配置正确.. 点击开始--运行--输入cmd,点击确定. 在命令行窗口输入java 然后Enter.没有出现java既不是内部命令也不是外部命令.说明配置是正确的. 在命令 ...
- JS组件系列——再推荐一款好用的bootstrap-select组件,亲测还不错
前言:之前分享过两篇bootstrap下拉框的组件:JS组件系列——两种bootstrap multiselect组件大比拼 和 JS组件系列——Bootstrap Select2组件使用小结 ,收 ...
- linux(十)配置ssh免密登录实现
知道ssh的朋友应该知道它是用来干什么的,如果你不知道什么是ssh远程登录的话,可以去看一下我的上一篇博客,关于linux的网络基础的知识.备注:ssh是用于远端登入.执行ssh指令开启终端机阶段作业 ...
- python基础教程(三)
序列概览 Python 包含6 种内建的序列,这里重点讨论最常用的两种类型:列表和元组. 列表与元组的主要区别在于,列表可以修改,元组则不能.也就是说如果要根据要求来添加元素,那么列表可以会更好用:而 ...
- 阿里 java学习之路
https://maimai.cn/article/detail?fid=96107193&push_id=5603&share_user=http%3A%2F%2Fi9.taou.c ...
- 分布式memcached-虚拟节点
1.通过memcached服务器下的不同端口来达到模拟多台服务器的效果 2.假设现在有三台memcached服务器,本地分别使用11211,11212,11213三个端口来模拟 ①打开端口 ②连接端口 ...
- 《物联网框架ServerSuperIO教程》- 22.动态数据接口增加缓存,提高数据输出到OPCServer和(实时)数据库的效率
22.1 概述及要解决的问题 设备驱动有DeviceDynamic接口,可以继承并增加新的实时数据属性,每次通讯完成后更新这些属性数据.原来是通过DeviceDynamic接口实体类反射的方式获 ...
- Java之JMX 详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt194 一.JMX简介 JMX是一种JAVA的正式规范,它主要目的是让程序有被 ...
- go golang 笔试题 面试题 笔试 面试
go golang 笔试题 面试题 笔试 面试 发现go的笔试题目和面试题目还都是比较少的,于是乎就打算最近总结一下.虽然都不难,但是如果没有准备猛地遇到了还是挺容易踩坑的. 就是几个简单的笔试题目, ...
- Beta版本冲刺计划及安排(附七天冲刺的博客链接)
Beta版本冲刺计划及安排(附七天冲刺的博客链接) 新增组员 本次换人加入我们团队的新成员是原"爸爸说的都队"的队长念其锋同学,经过我们小组严格的两轮面试,他从几个同样前来面试的同 ...