React 组建进阶、children 属性、props 校验-场景使用、 props 校验-规则说明、props 校验-默认值、defaultProps、PropTypes

React 组建进阶

children 属性

学习目标： 掌握 props 中 children 属性的用法

children 属性是什么
表示该组件的子节点，只要组件内部有子组件节点，props 中就有该属性
children 可以是什么

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

props 校验-场景使用

学习目标： 掌握组件 props 的校验写法，增加组件的健壮性

对于组件来说，props 是由外部传入的，我们无法保证组件使用者传入什么格式的数据，如果传入的数据格式不对，就有可能导致组件内部错误，组件使用者可能报错了也不知道为什么 > 例：

const List = (props) => {
  const arr = props.colors
  const lis = arr.map((item, index) => <li key={index}>{item.name}</li>)
}
;<list colors={19} />

面对这样的问题，我们可以使用 props 校验解决
实现步骤：

1. 安装校验包 yarn add prop-type
2. 导入prop-types包
3. 使用组件名。propTypes = {}给组件添加校验规则
   代码实现：

import React from 'react'
import PropTypes from 'prop-types'
function Test({ list }) {
  return (
    <div>
      {list.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </div>
  )
}
Test.propTypes = {
  list: PropTypes.array,
}
class App extends React.Component {
  state = {}
  render() {
    return (
      <>
        <Test list={[1, 2, 3]} />
      </>
    )
  }
}
export default App

props 校验-规则说明

学习目标： 掌握 props 常见的校验规则
四种常见结构：

1. 常见类型:array、bool、func、number、object、string
2. React 元素类型：element（jsx）
3. 必填项：isRequired
4. 特定的结构对象: shape()
   核心代码：

//常见类型
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
//必填
optionalFunc ： PropTypes.func.isRequired
//特定结构对象
optionalobjectwithShape: PropTypes.shape({
  color:PropTypes.string,
  fontSize:PropTypes.number
})

官方文档地址：https://reactjs.org/docs/typechecking-with-proptypes.html

props 校验-默认值

学习目标： 掌握如何给组件的 props 设置默认值

通过defaultProps可以给组件的 Props 设置默认值，在为传入 props 的时候生效

1.函数组件

1. 使用 defaultProps

import React from 'react'
//导入defaultprops
import PropTypes from 'prop-types'
function Test({ list }) {
  return (
    <div>
      {list.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </div>
  )
}
//设置默认值
Test.defaultProps = {
  list: [1, 2, 3], //如果传入list，就以传入的list为主，如果不传入list就默认list为[1,2,3]
}
class App extends React.Component {
  render() {
    return (
      <>
        <Test />
      </>
    )
  }
}
export default App

2. 使用函数参数默认值（推荐）
   注意：函数组件在新版本不在推荐使用 defaultProps 添加默认值，而是推荐使用函数参数默认值来添加默认值

function Test({ list = [1, 2, 3] }) {
  return (
    <div>
      {list.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </div>
  )
}

2.类组件

1. 使用 defaultProps

import React from 'react'
import PropTypes from 'prop-types'
class Test extends React.Component {
  render() {
    return <div>{this.props.list}</div>
  }
}
Test.defaultProps = {
  list: [1, 2, 3],
}
class App extends React.Component {
  render() {
    return (
      <>
        <Test />
        <Test list={[4, 5, 6]} />
      </>
    )
  }
}
export default App

2. 使用类静态属性声明

import React from 'react'
import PropTypes from 'prop-types'
class Test extends React.Component {
  static defaultProps = {
    list: [4, 5, 6],
  }
  render() {
    return <div>{this.props.list}</div>
  }
}
class App extends React.Component {
  render() {
    return (
      <>
        <Test />
        <Test list={[1,2,3]}>
      </>
    )
  }
}
export default App