react 中 props

一、props 校验

作用： 使用组件时，在传入错误的格式数据时，有报错提示用户应该传入什么格式。
安装：yarn add prop-types
例🌰子：

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

// 导入props校验模块，名称要固定写成propTypes
import propTypes from 'prop-types';

class App extends Component{
    render(){
        return (
            <div>
                <p>总共有{ this.props.iCount }条数据</p>
                <p>用户的性别是：{ this.props.sGender }</p>
            </div>
        )
    }    
}

// 定义App组件内props上面的属性的校验规则
App.propTypes={
    // 约束iCount的值必须是数字，而且是必填项（isRequired这个约束条件需要写在最后）
    iCount:propTypes.number.isRequired,
    sGender:propTypes.oneOf(['男','女','随机'])
}

ReactDOM.render(<App iCount={10} sGender='保密' />, document.getElementById('root'));

常用的约束规则：

• 常见类型：array、bool、func、number、object、string
• 必填项：isRequired
• 其中一个：oneof
  例如：oneof([‘male’,‘female’])

你可能需要：vue中prop校验、vue中prop类型

二、props 默认值

作用： 组件 props 中的属性值，有写值在使用时如果不传入，可以设置默认值，方便组件的初始化显示。
例🌰子：

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component{
    render(){
        return (
            <div>
                <p>每页显示{ this.props.iPageSize }条数据</p>
            </div>
        )
    }    
}

// 使用组件内置的 defaultProps 属性来设置组件 props 属性的默认值
App.defaultProps={
    iPageSize:10
}

ReactDOM.render(<App iPageSize={12} />, document.getElementById('root'));