react--props校验_react props校验

之后可以使用flow或TypeScript对整个应用程序做全局检查。

1、安装属性校验包yarn add prop-types

2、导入prop-types包

import PropTypes from 'prop-types'

3、使用

使用场景一：为函数添加propTypes校验

使用组件名.prop-types={}来给组件List的props添加校验规则

为组件添加propTypes，并通过PropTypes对象来指定属性的类型

List.propTypes={
  color:PropTypes.array,
  gender:PropTypes.oneOf(['male','female']).isRequired
}

使用场景二：为class类添加propTypes校验

class List extends Component{
  static propTypes={
    color:PropTypes.array,
    gender:PropTypes.oneOf(['male','female']).isRequired,
  }
  render(){
    const arr=this.props.color
    const lis=arr.map((item,index)=>
    <li key={index}>{item.name}</li>
    )
    return (
      <ul>{lis}</ul>
    )
  }
}

实例、静态的属性和方法

class List {
    name = '实例属性'
    look = () => {
        console.log('实例方法');
    }
    static hh = 'static属性'
    static see = () => {
        console.log('static方法');
    }
}
 
const lis = new List()
// 访问实例属性、调用实例方法
console.log(lis.name);
lis.look()
// 访问静态属性、调用静态方法
console.log(List.hh);
List.see()

prop属性默认值

在接收props的（）中写入默认值，例如：{page='99'}