如何修复ESLint的'react/prop-types'报错：props验证缺失？

报错原因 #

ESLint的react/prop-types规则要求组件接收的props必须定义类型验证，你的Note组件使用了name和description两个props，但未添加对应的类型校验，因此触发报错。

推荐解决方法 #

给Note组件添加propTypes定义，步骤如下：

1. 先安装prop-types依赖（如果项目还没装）：

   npm install prop-types --save
   # 或使用yarn
   yarn add prop-types
   

2. 修改Note组件代码，导入prop-types并添加props验证：

   import PropTypes from 'prop-types';
   
   export default function Note({name, description}) {
     return (
       <div>        
           <h1>{name}</h1>
           <p>{description}</p>
       </div>
     )
   }
   
   // 定义props的类型与必填性
   Note.propTypes = {
     name: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired
   };
   

这样就能通过ESLint的校验，同时让组件的props类型更清晰，提升代码健壮性。

其他可选方案（不推荐） #

• 关闭单个组件的规则：在组件顶部添加注释跳过校验，但会失去props校验的保障：

  /* eslint-disable react/prop-types */
  export default function Note({name, description}) {
    // ...组件原有代码
  }
  

• 全局关闭该规则：在ESLint配置文件（如.eslintrc.js）中禁用react/prop-types规则，不推荐这种方式，会影响整个项目的代码质量：

  module.exports = {
    rules: {
      'react/prop-types': 'off'
    }
  };
  

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