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>
      ))