React-05React中props属性（传递数据），propTypes校验，类式与函数式组件props的使用

1.类式组件props基本数据读取与解构运算符传递

2.类式组件propTypes校验props传递数据规则

propTypes是react提供的一种工具，对于组件的props进行类型检查

 2.1 html引入prop-types.js

2.2 react脚手架引入

npm install prop-types

2.3 propTypes验证器声明类型

基本数据类型

PropTypes.string：字符串
PropTypes.number：数字
PropTypes.boolean：布尔值
PropTypes.object：对象
PropTypes.array：数组
PropTypes.func：函数
PropTypes.symbol：Symbol

特殊类型

PropTypes.node：任何可以被渲染的内容：数字、字符串、元素或数组（包括这些类型）
PropTypes.element：React元素
PropTypes.instanceOf(Class)：某个类的实例

组合类型

PropTypes.oneOf(['option1', 'option2'])：枚举类型，值必须是所提供选项之一
PropTypes.oneOfType([PropTypes.string, PropTypes.number])：多个类型中的一个
PropTypes.arrayOf(PropTypes.number)：某种类型组成的数组
PropTypes.objectOf(PropTypes.number)：某种类型组成的对象
PropTypes.shape({ key: PropTypes.string, value: PropTypes.number })：具有特定形状的对象

2.4具体代码例子

 指定标签默认属性

        // 指定标签默认属性
        PersonalInfo.defaultProps = {
            name: '未知',
            gender: '未知',
            age: 0
        }

 props传递限制传递数据规则

 PersonalInfo.propTypes = {
            // 限定为字符串类型 必填项
            name: PropTypes.string.isRequired,
            gender: PropTypes.string.isRequired,
            age: PropTypes.number.isRequired
        }

扩展运算符批量传入

        // 渲染组件
        const p ={name:'岂不闻',gender:'男',age:'24'}
        // 展开运算符  解构赋值 babel+react 解构运算符 仅使用与标签中数据传递
        ReactDOM.render(,document.getElementById('test1'))

 整体代码

3.类式组件props的简写方式 （static 关键字）

 4.函数式组件props的使用