React 的强类型校验(propTypes),必传(isRequired),默认值(defaultProps) 的使用

5 篇文章 0 订阅

propTypes 的使用
propTypes:接受外部传过来的参数 并对其做强类型检验

import React, { Component } from "react";
import PropTypes from 'prop-types'

//TodoItem 代表一个子组件
// TodoItem.propTypes 对父组件的属性做强类型校验
TodoItem.propTypes = {
  test:PropTypes.string.isRequired, // isRequired 是必传 的意识
  itemHtml: PropTypes.string, //校验字符串类型
  delItem: PropTypes.func,//校验 函数提
  itemIndex:PropTypes.number , //校验数字
  optionalArray: PropTypes.array,//校验数组
  optionalObject: PropTypes.object, //校验对象
  //多种类型的组合
  // 一个对象可以是几种类型中的任意一个类型
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 可以指定一个数组由某一类型的元素组成
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 可以指定一个对象由某一类型的值组成
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 可以指定一个对象由特定的类型值组成
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
}

// defaultProps 给必传项设置默认值

// defaultProps 给必传项设置默认值
TodoItem.defaultProps = {
  test:'demo'
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值