【React】属性默认值和类型校验

Component – React 中文文档

prop-types - npm (npmjs.com)

React.PropTypes已移入另一个包中。因此首先我们需要安装 prop-types 库。

npm install --save prop-types

主要用法：

• 常规校验
• 自定义校验
• 数组(对象)校验
• 插槽校验
• 属性默认值
• 节点、元素等其他校验

import ChildCom from "./components/ChildCom";


function App() {
  return (
    <div className="App">
      <h1>我是 App</h1>
        <ChildCom name={"jk-stu"} age={20} score={[11,22]} >
            <p>插入一些内容</p>
        </ChildCom>
        <ChildCom score={[11,22]} >
            <p>插入一些内容</p>
        </ChildCom>
    </div>
  );
}

export default App;

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

function ChildCom(props) {
    return (
        <div>
            这是子组件
           <div>姓名：{props.name} 年龄：{props.age}</div>
            <div>{props.children}</div>
        </div>
    );
}

// props 类型校验
ChildCom.propTypes = {
    // name: PropTypes.string,
    age: PropTypes.number,
    /**
     * 自定义校验规则
     * @param props 组件的props
     * @param propName 校验的属性名
     * @param componentName 组件的名称
     * @returns {Error}
     */
    name: function(props, propName, componentName) {
        if (!/-stu/.test(props[propName])) {
            return new Error(
                'Invalid prop `' + propName + '` supplied to' +
                ' `' + componentName + '`. Validation failed.'
            );
        }
    },
    /**
     * 数组类型校验
     * @param propValue 校验的属性值
     * @param key 校验的属性值在数组中的位置
     * @param componentName 组件的名称
     * @param location 校验的属性名在组件中的位置
     * @param propFullName 校验的属性名在组件中的完整名称 比如 score[2]
     * @returns {Error}
     */
    score: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
        if (typeof propValue[key] !== 'number') {
            return new Error(
                'Invalid prop `' + propFullName + '` supplied to' +
                ' `' + componentName + '`. Validation failed.'
            );
        }
    }),
    // 插槽校验 这里必须插入一个element
    children: PropTypes.element.isRequired
}
// props 设置默认值
// 但该用法即将移除
ChildCom.defaultProps = {
    name: '张三-stu',
    age: 18
}

export default ChildCom;