React函数组件配置PropTypes出现props校验失败问题求助

报错原因 #

Child.propTypes的配置规则是：对象的键名必须和组件接收的顶层props属性名一一对应，你错误地将键名写为props，但实际代码中使用的顶层props属性是data，且还访问了data下的text属性，因此lint检测到data和data.text都没有对应的校验规则，抛出错误。

解决方案 #

方案1：基础校验（仅满足lint要求，不校验嵌套结构） #

直接声明顶层data属性为必填对象类型即可：

import PropTypes from 'prop-types'

const Child = (props) => <div>{props.data.text}</div>

Child.propTypes = {
  data: PropTypes.object.isRequired
}

方案2：严格校验嵌套结构（推荐） #

使用PropTypes.shape定义data的内部结构，对text字段也做类型校验，避免后续传入非法格式的属性：

import PropTypes from 'prop-types'

const Child = (props) => <div>{props.data.text}</div>

Child.propTypes = {
  data: PropTypes.shape({
    // 可根据实际业务需求调整text的类型，比如PropTypes.number、PropTypes.node等
    text: PropTypes.string.isRequired
  }).isRequired
}

内容的提问来源于stack exchange，提问作者krsna