react18子组件设置接收默认值和值类型验证

父组件传值

import ChildCom from './components/ChildCom'
export default function Person {
    return(
        <div>
            <ChildCom name="alan-ben" age={18} score={[98, 97, 100]} />
        </div>
    )
}

子组件接收并验证类型

import React from 'react'
import PropTypes from 'prop-types'
export default function ChildCom (props) {
    const score = props.score.map((value,index) => {
    return(
      <span key={index} style={{padding: '4px'}}>{value}</span>
    )
  })
  return (
    <div>
      <div>名字: {props.name}</div>
      <div>年龄: {props.age}</div>
      <div>性别: {props.sex}</div>
      <div>
        各科成绩是：{score}
      </div>
      <div>{props.children}</div>
    </div>
}
// 设置默认值
ChildCom.defaultProps = {
    age: 20,
    sex: '男' // 如果不传的话这个就是默认值
    score: [78]
}
// 数据类型验证
ChildCom.propTypes = {
    // 类型验证
    age: PropTypes.number,
    sex: PropTypes.string,
    // 必须要有的
    children: PropTypes.element.isRequired,
    // 验证名字里面要有alan
    /**
     * 
     * @param {*} props 整体的 props 对象 {name:... , age :...}
     * @param {*} propName 当前验证的 props 属性 name
     * @param {*} componentName 组件名
    */
    name: function (props, propName, componentName) {
        // 如果开头不是alan的话，验证不通过
        if (!/alan-/.test(props[propName])) {
            return new Error(
                `组件名：${componentName}的属性${propName}验证不通过,需要的开头是'alan-'`
            )
        }
    },
    score: PropTypes.array
}