React-13 props 深入

1. props的children属性：

children属性：表示组件标签的子节点，当组件有 子节点时，props就会自动有该属性；

如：

funtion Hello(props){
   return (
     <div>
        组件标签的子节点：{props.children}
     </div>
   )
}

<Hello>我是子节点</Hello>

children属性与普通的props一样，值可以是任意值（文本、React元素、组件、甚至是函数），当为函数时可用props.children()调用；

2.props校验

对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，如果传入的数据格式不对，可能会导致组件内部报错；

如：

function App(props){
  const arr = props.colors;
  const list = arr.map((item,index)=><li key={index}>{item}</li>}
  return (
    <ul>{list}</ul>
  )
}

<App colors={19} />
    

这时就需要用到props校验：允许在创建组件时，就指定props的类型、格式等；

如：

作用：能够捕获使用组件因为props导致的错误，并给出明确的错误提示，增加组件的健壮性；

props校验使用步骤：

  1）使用npm（npm i prop-types）或yarn（yarn add prop-types）安装 prop-types 包；

  2）在代码中导入prop-types包 （import PropTypes from 'prop-types)；

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

App.propTypes={
  colors:PropTypes.array
}

props校验常见的约束规则：

1.常见类型：array、bool、func、number、object、string；

2.React元素类型：element；

3.必填项：isRequired；

4.特定结构的对象：shape({})；

// 常见类型
optionalFunc:PropTypes.func
// 必选
requiredFunc:PropTypes.func.isRequired
//特定结构的对象
optionalObjectWithShape：PropTypes.shape({
     color:PropTypes.string,
     fontSuze:PropTypes.number,
})

其余校验约束规则详见：https://reactjs.org/docs/typechecking-with-proptypes.html

3.props的默认值

使用场景：分页组件 --> 每页显示条数；

作用：给props设置默认值，在未传入props时生效；

function App(props){
   return (
     <div>
       此处显示prop的默认值：{props.pageSize}
     </div>
   )
}

// 设置默认值
 App.defaultProps={
   pageSize:10,
 }

//不传入pageSize属性时则会读取默认值进行渲染
<App />