React组件解构参数触发ESLint prop-types错误的原因疑问

这个ESLint错误来自react/prop-types规则，核心要求是：组件中用到的所有props必须通过propTypes明确声明校验规则。不管你用哪种方式处理props，只要组件实际使用了某个prop但没在propTypes里定义，就会触发这个错误。

具体到你的几种场景：

• 参数直接解构：当你写function Show({name, age}) { ... }时，ESLint会识别到age是组件依赖的prop。如果Show组件的propTypes里没定义age，就会提示缺失校验。
• 函数内部解构：就算把解构移到函数里（const {name, age} = props），ESLint仍会追踪到你在访问props.age，所以还是要求age必须出现在propTypes中——规则不关心解构的位置，只关心哪些props被组件实际使用了。
• 展开传参{...data}：错误和传参方式无关，问题出在接收props的组件上。只要Show组件用到了age但没在自身的propTypes里声明，不管你是单独传<Show age={data.age}>还是用展开，ESLint都会报错。

解决方法 #

给组件添加propTypes声明即可，示例：

import PropTypes from 'prop-types';

function Show({name, age}) {
  // 组件逻辑
}

Show.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number // 根据需求添加.isRequired或其他校验规则
};

如果确实不需要校验某个prop，也可以在组件顶部用注释禁用该规则：

/* eslint-disable react/prop-types */
function Show({name, age}) { ... }

但不推荐这么做，propTypes能帮你提前捕获props类型错误或缺失的问题，是React开发的最佳实践之一。

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