在React中为了保证组件的正确使用,引入了
prop-types
来提供多种验证传入参数的有效性,当向props传入无效数据时 (也可以理解为传值的类型与检验类型不一致),JavaScript控制台会抛出警告!
PropTypes 提供了多种类型验证
- PropTypes.string.isRequired
- PropTypes.bool.isRequired
- PropTypes.func.isRequired
- PropTypes.number.isRequired
- PropTypes.object.isRequired
- PropTypes.array.isRequired
类型检测和默认值—例子:
通过一个父子间传值,简单的了解一下类型检测和默认值
首先在你要进行检验类型的组件中(此例子就是子组件),引入
prop-types
父组件:
import React from 'react';
//引入子组件
import Son from './Son.js'
function App(){
return(
<div>
//在这里给子组件传个name值
<Son name:"Tom"></Son>
</div>
)
}
export dafault App;
子组件:
import React, { Component } from 'react';
//引入 prop-types
import PropTypes from 'prop-types';
export default class Son extends Component{
//在这里进行类型检测(这里的名字不是随便自定义的,规定这样写的)
static propTypes = {
name:PropTypes.string.isRequired,
}
//如果没有传值,可以给一个默认值
static defaultProps = {
name:'Jack'
}
constructor(){
super();
this.state = {
num:1
}
}
render(){
//这里的React.Fragment,是为了防止有太多个div节点,它可以'代替'根节点,这样代码就会报错,
//以至于就能保证整个代码有一个根节点div
return <React.Fragment>{this.state.num}</React.Fragment>
}
}