react——子组件props字段类型类型限制——默认值设置。

Posted 2022-09-21 勇敢*牛牛

安装

react15.5之前类型的限制包，需要手动安装

yarn add  prop-types

导入

import types from 'prop-types'

对于组件来说，props是外部传入的，无法保证组件使用者传入什么格式的数据，简单来说就是组件调用者可能不知道组件封装着需要什么样的数据，如果传入的数据不对，可能会导致程序异常，所以必须要对于props传入的数据类型进行校验。
但是js虽然会报错但是不会卡住程序的运行

npm i -S prop-types

# 在组件中导入
import PropTypes from 'prop-types'


# 函数组件
function App()
// 验证规则
App.propTypes = 
    prop-name:PropTypes.string


# 类组件
class App extends Component

App.propTypes = 
    prop-name:PropTypes.string


💞约束类型
https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#proptypes
- 类型： array、bool、func、number、object、string
- React元素类型：element
- 必填项：isRequired
- 特定结构的对象： shape()
- 自定义类型

Child.propTypes=
    name:types.number,
    age:types.number.isRequired,//属性它必须是一个数字类型,且此属性必须要存在
    arr:types.arrayOf(types.number),//定义数组类型，并且指定元素的类型
    object: types.object,//对象类型
    sex:types.oneOf(["男","女"]),
    obj:types.shape(//对象key值约束
        id:types.oneOfType([types.number, types.string]),// 两个类型选择
        title:types.string,//字符串
        fn:types.func//函数类型
    ),
    phone:(props,key)=>  // 自定义规则(函数)
        // props，当前的属性列表对象
        // key 当前的属性名称
        let value = props[key];// 得到属性的值 
        if (!/^1[3-9]\\d9$/.test(value)) 
            return new Error('有误')// 如果不正确，一定要返回一个Error对象，这样就可以在控制台中看到信息,不要throw
        
    

默认值

如果props没有属性没有传过数据，为了不让程序异常，可以设置其默认值。
语法：

此写法是类组件和函数组件通用的写法
// 字段类型限制
Child.propTypes = 
  age: types.any,


// 默认值 直接赋值就可以
Child.defaultProps = 
  age: 1000

组件内部的写法：

import React,  Component  from 'react';
import types from 'prop-types'
class Child extends Component 
    static propType =
        age:types.number,
    
    static defaultProps = 
        age:20
    
    render() 
        let name = "勇敢牛牛" = this.props;//在此处写的默认，属于开发者，自主去写的，有可能有的开发者他就不定义
        let  age = this.props
        return (
            <div>
                <h2>我是子组件收到的props组件=name</h2>/*勇敢牛牛 */
                <h2>我是子组件收到的props组件=age</h2>/* 20*/
            </div>
        );
    

class App extends Component 
    render() 
        return (
            <div>
                <Child></Child>
            </div>
        );
    


export default App;