React的Props校验与默认值

React的Props使用

React的props校验

一.使用步骤：

1. props校验需要先安装prop-types这个库

   npm i -S prop-types

2. 引用prop-types
   ​ import PropTypes from 'prop-types'

3. 自定义校验规则
   

二.代码：

import React from 'react'
import PropTypes from 'prop-types'
class Parent extends React.Component {
    static propTypes = {
        test: PropTypes.func.isRequired,
        obj: PropTypes.shape({
            a: PropTypes.string,
            b: PropTypes.number
        }),
        arr: PropTypes.array.isRequired
    }



    render(){
        return (
            <div>这是Parent组件：{this.props.test()},{this.props.obj.a},{this.props.obj.b}
            <ul>
                {
                    this.props.arr.map(item => {
                       return <li key={item}>{item}</li>        
                    })
                }
            </ul>

            </div>
        )
    }
}



export default Parent

React默认参数

使用：

代码：

 // 导入组件
import Demo5 from './2.props校验';
// 使用defaultProps
Demo5.defaultProps = {
  arr:[1,2,3]
}