React—— props校验（非typescript校验类型）

非typescript环境下，当我们在封装组件的时候，接受props时传入的内容，需要做类型检测，那我们可以用props校验进行类型的检查。

props校验允许在创建组件的时候，就约定props的格式、类型等

实现步骤：

• 导入 prop-types 包

• 使用组件名.propTypes = {} 来给组件的props添加校验规则

• 校验规则通过 PropTypes 对象来指定

• 如果props想设置默认值，可以通过defaultProps去设置

  1. 常见类型：array、bool、func、number、object、string
  2. React元素类型：element
  3. 必填项：isRequired
  4. 特定结构的对象：shape({})

import PropTypes from 'prop-types'
function App(props) {
    return (
    	<h1>{props.colors}</h1>
    	<h1>{props.num}</h1>
    	<h1>{props.name}</h1>
    )
}
// 这里约定了属性时什么类型，不然类型检测不通过，会清晰报错
App.propTypes = {
    colors: PropTypes.array,
    num:PropTypes.number,
    name:PropTypes.string,
}

// 设置默认值
App.defaultProps = {
	colors: ['蓝色']，
    nun:18,
    name:'hyy'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

###React—— 类的-static 校验简写上面的校验
ES6新出的class可以帮组我们进行类型校验，我们可以定义一个类，给定其类型即默认值。

• 实例成员: 通过实例调用的属性或者方法叫做实例成员（属性或者方法）

• 静态成员：通过类或者构造函数本身才能访问的属性或者方法

  static可以把实例成员设置未静态成员

static的作用：简写校验、简写默认值

import PropTypes from 'prop-types'
function App(props) {
    return (
    	<h1>{props.colors}</h1>
    	<h1>{props.num}</h1>
    	<h1>{props.name}</h1>
    )

// 这里约定了属性时什么类型，不然类型检测不通过，会清晰报错
static propTypes = {
    colors: PropTypes.array,
    num:PropTypes.number,
    name:PropTypes.string,
}

// 设置默认值
static defaultProps = {
	colors: ['蓝色']，
    nun:18,
    name:'hyy'
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22