react 属性校验

之前, 属性校验是react里面的一部分, 现在这个部分被抽离了出来, 形成了一个独立的模块.
在给子组件传递值的时候, 子组件有时候希望校验一下父组件传递过来的值的类型到底是不是符合要求.
校验的结果不会影响渲染, 但是会在控制台打出一串很烦心的红色警告.

安装

npm install --save prop-types

引入

import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

使用

import React from 'react'
import PropTypes from 'prop-types'

export default class PropType extends React.Component {

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number,
        sex: PropTypes.oneOf(['男', '女']),    // 只能是数组里面的某一个值
        features: PropTypes.objectOf(PropTypes.number),  // 这个对象里面的属性只能是number
        salary: (props, propName, componentName) => {  // 函数校验, 如果这个值不符合要求, 将会抛出异常
            if(props[propName] < 10000){
                return new Error(
                    'Invalid prop `' + propName + '` supplied to' +
                    ' `' + componentName + '`. Validation failed.'
                );
            }
        }
    }

    render() {
        // console.log(this.props);
        const {name, age, sex, features, salary} = this.props // 解构赋值
        return (
           <div>
               <div>个人资料</div>
               <div>姓名: {name}</div>
               <div>年龄: {age}</div>
               <div>性别: {sex}</div>
               <div>身高: {features.weight} kg</div>
               <div>体重: {features.height} cm</div>
               <div>薪水: ¥ {salary}</div>
           </div>
        );
    }
}

当然, 还有很多类型的校验方式, 在官方的github上罗列了很多, 详情移步https://github.com/facebook/prop-types