react-props中的children以及props的校验

1.children是什么

在组件中写了任意内容，都会出现在该组件props中children属性里

内容可以是：

1. 普通文本
2. 普通标签元素
3. 函数 / 对象
4. JSX

import React from 'react'
import styles from './App.module.css'
import { FSon } from './FSon'
import { CSon } from './CSon'

export class Header extends React.Component {
  render() {
    return (
      <div className={styles.one}>
        <div>父</div>
        <FSon>
          文本子节点
          <div>普通标签</div>
          <CSon />
          {() => console.log(123)}
        </FSon>
        <CSon>
          {' '}
          文本子节点
          <div>普通标签</div>
          <FSon />
          {() => console.log(123)}
        </CSon>
      </div>
    )
  }
}

 从下面图可以看出： 子组件的props中有children，是数组且元素是传进来的内容

2.props的校验

1.为什么有： 

对于组件来说，props是由外部传入的，我们其实无法保证组件使用者传入了什么格式的数据 

所以可以添加校验确保数据各式是正确的

2.实现步骤

1. 安装属性校验包：prop-types
2. 导入prop-types 包
3. 使用 组件名.propTypes = {} 给组件props中的数据添加校验规则

比如
FSon.propTypes = {
  colors: PropTypes.array,
}

import React from 'react'
import styles from './App.module.css'
import { FSon } from './FSon'

export class Header extends React.Component {
  render() {
    return (
      <div className={styles.one}>
        <div>父</div>
        <FSon colors={['red', 'blue']}></FSon>
      </div>
    )
  }
}

import React from 'react'
import styles from './App.module.css'

//导入包
import PropTypes from 'prop-types'

// 函数式子组件
export const FSon = (props: any) => {
  console.log('函数组件', props)
  const { colors: arr } = props
  const lis = arr.map((item: any, index: any) => (
    <li key={index}>{item.name}</li>
  ))
  return (
    <div className={styles.two}>
      <div>函数子组件：</div>
      <ul>{lis}</ul>
    </div>
  )
}

//确定传进来的数据格式
FSon.propTypes = {
  colors: PropTypes.array,
}

3.props校验-规则说明

四种常见结构

1. 常见类型：array、bool、func、number、object、string
2. React元素类型：element
3. 必填项：isRequired
4. 特定的结构对象：shape({})

// 常见类型
optionalFunc: PropTypes.func,
// 必填 只需要在类型后面串联一个isRequired
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
	color: PropTypes.string,
	fontSize: PropTypes.number
})

4.props校验-默认值

1. 函数组件

直接使用函数参数默认值

function List({pageSize = 10}) {
  return (
    <div>
      此处展示props的默认值：{ pageSize } //10
    </div>
  )
}

// 不传入pageSize属性
<List />

2. 类组件

使用类静态属性声明默认值，static defaultProps = {}

class List extends Component {
  static defaultProps = {
    pageSize: 10
  }
  render() {
    return (
      <div>
        此处展示props的默认值：{this.props.pageSize} //10
      </div>
    )
  }
}
<List />