这个主要用于验证父组件传递的值是否复合类型规范
propTypes可验证的数据类型如下
on.propTypes = {
optionalArray: PropTypes.array,//检测数组类型
optionalBool: PropTypes.bool,//检测布尔类型
optionalFunc: PropTypes.func,//检测函数(Function类型)
optionalNumber: PropTypes.number,//检测数字
optionalObject: PropTypes.object,//检测对象
optionalString: PropTypes.string,//检测字符串
optionalSymbol: PropTypes.symbol,//ES6新增的symbol类型
}
主要的用处是预防同事用了你的组件 但他传递值数据类型有问题
我们先创建一个react项目
然后在src下的components文件夹下找到index.jsx 如果没有 就自己建一个
index.jsx参开代码如下
import React from "react";
import PropTypes from "prop-types";
class compindex extends React.Component{
static propTypes={
title:PropTypes.string
}
render(){
return (
<div>
PropTypes组件验证 {
this.props.title }
</div>
)
}
}
export default compindex;
这里 我们就引入了prop-types 我们这个组件会接受一个title变量 我们用PropTypes强行限制他要是字符串 string类型的
然后我们在src下的App.jsx中编写代码如下
import './App.css';
import React from "react";
import Index from "./components/index";
class App extends React.Component{
constructor(props){
super(props);
this.state = {
title: "标题"
}
}
render(){
return (
<div className="App">
<Index title = {
this.state.title}/>
</div>
)
}
}
export default App;
我们这里 引入了Index组件 然后 在state中定义了一个title 然后传给Index一个title变量 对应的值就是我们在state中定义的title
我们看一下界面效果
一切正常 但现在是因为 我们index中PropTypes限制的字符串类型 我们App.jsx也正好传了一个字符串
那如果我们传个数字呢?
将App.jsx的state修改如下
this.state = {
title: 333
}
这是我们的控制台就报错啦 他在告诉你 PropTypes 约定的是string字符串类型 而你传了个 numder数字类型
那如果我们不传了呢?
App.jsx修改render如下
render(){
return (
<div className="App">
<Index/>
</div>
)
}
我们会发现 不传propTypes就没有继续去约束他的类型了
但我们要是这个变量之后要用 没有组件就会报错呢?
这时就轮到isRequired登场了
index.jsx propTypes修改为如下
static propTypes={
title:PropTypes.string.isRequired
}
控制台就又开始报错说这个变量不能为空了 isRequired就是一个非空验证
但又有时 我们处于人道考虑 有些人可能会 不读我们的代码 直接用我们这个组件 但直接报错有点狠了
那么 我们也可以写个默认值
index.jsx 整体代码更改如下
import React from "react";
import PropTypes from "prop-types";
class compindex extends React.Component{
static defaultProps = {
title: '标题'
}
static propTypes={
title:PropTypes.string.isRequired
}
render(){
return (
<div>
PropTypes组件验证 {
this.props.title }
</div>
)
}
}
export default compindex;
我们通过 defaultProps给了他哥默认值 当title为空时 赋值为 ‘标题’ 如果title有值 defaultProps 则不会影响他的值
这时 控制台就不报错了 title也有值啦