20.props深入

• 20.props深入
  • 1.children 属性
  • 2.props校验
  • 3.props校验 - 约束规则
  • 4.props的默认值

1.children 属性

• children 属性: 表示组件标签的子节点. 当组件标签有子节点时, props就会有该属性
• children 属性与普通的props一样, 值可以是任意值(文本, React元素, 组件, 甚至是函数)

2.props校验

• 对于组件来说, props是外来的, 无法保证组件使用者传入什么格式的数据
• 如果传入的数据格式不对, 可能会导致组件内部报错
• 关键问题: 组件的使用者不知道明确的错误原因
• props校验: 允许在创建组件的时候, 就指定props的类型, 格式等
• 作用: 捕获使用组件时因为props导致的错误, 给出明确的错误提示, 增加组件的健壮性

使用步骤:

• 1.安装包 prop-types (yarn add prop-types / npm i prop-types)

• 2.导入 prop-types 包

• 3.使用 组件名.propTypes = {} 来给组件的props添加校验规则

• 4.校验规则通过PropTypes 对象来指定

• 5.如果是在组件内, 给组件类指定需要添加 static

class Example extends React.Component {
  // 组件类指定属性   ⭐⭐⭐
  static propTypes = {
  	example: PropTypes.array,isRequired
  }
  render() {
    return (....)
  }
}

3.props校验 - 约束规则

• 1.常见类型: array, bool, func, number, object, string

• 2.React元素类型: element

• 3.必填项: isRequired

• 4.特定结构的对象: shape({})

// 添加props校验
// 属性 a 的类型   数值(number)
// 属性 fn 的类型  函数 (func) 并且为必填项 
// 属性 tag 的类型 React元素(element)
// 属性 filter 的类型: 对象 ({area:'长沙', price: 2018})

APP.propTypes = {
  a: PropTypes.number,
  fn: PropTypes.func.isRequired,
  tag: PropTypes.element,
  filter: PropTypes.shape({
    area: PropTypes.string,
    price: PropTypes.number
  })
}

4.props的默认值

• 场景: 分页组件 -> 每页显示条数
• 作用: 给 props 设置默认值, 在未传入 props 时生效