react类型检查

react类型检查

react使用prop-types库进行类型检查。

PropTypes 提供一系列验证器，可用于确保组件接收到的数据类型是有效的。

当传入的 prop 值类型不正确时，JavaScript 控制台将会显示警告。出于性能方面的考虑，propTypes 仅在开发模式下进行检查。

  // 你可以将属性声明为 JS 原生类型，默认情况下
  // 这些属性都是可选的。
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

import React,{Component} from 'react';
import One from "./One"
class App extends Component{
  render(){
    let username = "张三"
    let userArr = [
      {
        id:1,sex:"男"
      },
      {
        id:2,sex:"女"
      }
    ]
    return (
      <div>
        <One userArr={userArr} username={username}></One>
      </div>
    )
  }
}

export default App;

子组件接收到数据，采用PropTypes检查

username:PropTypes.string 简单单个的数据类型

userArr:PropTypes.oneOfType([PropTypes.string,PropTypes.array]) 可以指定一个数组只要符合某一个类型就可以

userArr:PropTypes.arrayOf(PropTypes.object)可以指定一个数组由某一类型的元素组成

optionalObjectOf: PropTypes.objectOf(PropTypes.number)可以指定一个对象由某一类型的值组成

optionalObjectWithShape: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }), 可以指定一个对象中的值由特定的类型值组成

import React, { Component } from 'react'
import PropTypes from 'prop-types';
export default class One extends Component {
    //第一种：采用静态static的写法
    static propTypes={
        username:PropTypes.string,
        // userArr:PropTypes.array

        // 规定外部传入的属性userArr可以是stirng or array
        // userArr:PropTypes.oneOfType([PropTypes.string,PropTypes.array])

        // 规定外部传入的属性userArr是一个数组，数组里面包含的对象结构
        // userArr:PropTypes.arrayOf(PropTypes.object)

        //外部必须传入userArr属性，这个是一个数组，数组里面每一项是一个对象结构
        //每个对象结构，有两个字段必填，一个number的id，一个string的sex
        userArr:PropTypes.arrayOf(PropTypes.shape({
            id: PropTypes.number.isRequired,
            sex: PropTypes.string.isRequired
        })).isRequired
    }
    //同时对于属性，组件是可以定义默认属性的
    static defaultProps = {
        username:"哈哈哈"
    }
    render() {
        return (
            <div>
                one --- {this.props.username}
            </div>
        )
    }
}

//第二种;采用原型链的写法：
// One.propTypes = {
//     username:PropTypes.number
// }