React PropTypes检验传递的值

在工作当中,我们进行传参一定要对象传递的数据进行校验,如果不校验的话,大量的数据传递,会造成混乱,业务逻辑也没办法保证。

引入prop-types

 //prop-types  父传子 要在子组件引入并校验
import PropTypes from "prop-types"

PropTypes 提供一系列验证器,可用于确保组件接收到的数据类型是有效的。在本例中, 我们使用了 PropTypes.string。当传入的 prop 值类型不正确时,JavaScript 控制台将会显示警告。出于性能方面的考虑,propTypes 仅在开发模式下进行检查。

根据父组件向子组件传递的数据,及类型进行校验

return(
     <XiaojiejieItem content={item} index={index}
     key = {index+item}
     //  传递删除的方法给子组件
      deletItem = {this.deletItem.bind(this)}
     //把 数组 数据传递给子组件,单向数据流 传递过去只能使用不能修改
    list = {this.state.list}
    //  avname="小刘"
    />
                       
 ) 

子组件内进行校验

    // 注意校验的时候要写在 类的外面
    xiaojiejieItem.PorpTypes={
        index:PropTypes.func,  //这里传过来的是数字改成方法 也不报错
        avname:PropTypes.string.isRequired, //isRequired 必须传参
        content:PropTypes.string,
        deletItem:PropTypes.func   //校验方法
    } 

必传值的校验

比如现在我们加入一个avname的属性,并放入JSX中,就算不传递这个值也不会报错的

    render() { 
        return ( 
            // 点击事件            this.props.content 子接
        <li onClick = {this.handleClick}>
        {this.props.avname}--为你服务 : {this.props.content}
        </li>
         );
    }

如果 在校验的时候加上关键字isRequired,这事 父组件如果不传过来参数,这里就会报错,我们就需要在父组件里进行传参 或者 在子组件中使用defalutProps 默认值

    //若父组件 不传值这里写成默认的
    xiaojiejieItem.defaultProps = {
        avname:"小庄"
    }

注意官网还有很多校验其他数据类型的方法,这里不一一举例
https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React PropTypesReact 库中的一个功能,用于对组件的属性进行类型检查。它可以帮助开发者在开发过程中捕获潜在的错误和 bug。 在使用 PropTypes 之前,需要先安装 prop-types 包。安装命令如下: ``` npm install prop-types ``` 然后,在需要进行属性类型检查的组件文件中,导入 PropTypes: ```js import PropTypes from 'prop-types'; ``` 接下来,在组件定义之后,可以使用 PropTypes 来定义组件接收的属性类型。 ```js MyComponent.propTypes = { name: PropTypes.string, age: PropTypes.number, isStudent: PropTypes.bool, onClick: PropTypes.func, config: PropTypes.shape({ title: PropTypes.string, description: PropTypes.string, }), }; ``` 上述代码中,我们通过 `PropTypes` 对象来定义了 `MyComponent` 组件接收的属性类型。例如,`name` 属性应该是一个字符串,`age` 属性应该是一个数字,`isStudent` 属性应该是一个布尔,`onClick` 属性应该是一个函数,`config` 属性应该是一个对象,并且对象中应包含 `title` 和 `description` 两个属性。 如果传递给组件的属性类型不符合定义,React 会在开发模式下发出警告,并帮助我们找到问题所在。 PropTypes 提供了多种属性类型检查的方法,例如 `array`, `bool`, `func`, `number`, `object`, `string`, `symbol` 等等。还可以使用 `oneOfType` 来指定多个可能的属性类型,或者使用 `isRequired` 来指定某个属性是必需的。 总之,React PropTypes 是一种用于对组件属性进行类型检查的强大工具,它可以提高代码的可靠性和可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jason–json

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值