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
}