React 父组件传参类型检测和默认值——PropTypes_react 声明组件的父级参数类型

在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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

子组件：

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>
	}
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28