解决 ESLint 报错 'xxx' is missing in props validation react/prop-types

当你在 React 项目中使用 PropTypes 进行属性类型检查时，如果某个属性没有在 PropTypes 中定义，ESLint 就会报错提示 ‘xxx’ is missing in props validation。这通常发生在以下几种情况：

1. 你忘记定义某个属性类型
2. 你误删除了某个属性类型
3. 你使用了新的属性名称，但 PropTypes 中还保留着旧名称
   要解决这个问题，你需要按照以下步骤进行操作：
4. 确定报错信息的具体内容
   首先，查看 ESLint 报错信息，确定缺少哪个属性的类型定义。报错信息通常会指出问题所在的行数和文件名。
5. 检查 PropTypes 定义
   找到报错信息中指定的文件，检查该组件的 PropTypes 定义。确保所有属性都已正确定义，并且没有拼写错误或遗漏。
   例如，如果你的组件定义如下：

   import PropTypes from 'prop-types';
   function MyComponent(props) {
   // 组件代码
   }
   MyComponent.propTypes = {
   firstName: PropTypes.string,
   lastName: PropTypes.string,
   };

   确保 propTypes 中包含了所有需要的属性，如 firstName 和 lastName。如果缺少某个属性，比如 age，就需要添加相应的定义。
6. 使用默认属性或类型转换
   如果你无法确定某个属性的类型，或者该属性是可选的，你可以使用默认属性或类型转换来避免 ESLint 报错。
   例如，你可以这样定义 PropTypes：

   MyComponent.propTypes = {
   age: PropTypes.number, // 默认属性类型为 number
   name: PropTypes.string, // 默认属性类型为 string
   };

   或者使用类型转换：

   MyComponent.propTypes = {
   age: (props) => PropTypes.number(props.age),
   name: (props) => PropTypes.string(props.name),
   };

   这样即使属性未定义或类型不匹配，也不会触发 ESLint 报错。但请注意，这并不意味着你的代码没有错误，只是暂时避免了 ESLint 的检查。在实际开发中，建议尽可能准确地定义 PropTypes，以确保代码质量和可维护性。
7. 使用 ESLint 规则和插件
   如果你不想在代码中添加默认属性或类型转换，可以考虑调整 ESLint 的规则或使用相关插件来避免此类错误。例如，你可以禁用与 PropTypes 相关的 ESLint 规则，或者使用一些能够自动修复 PropTypes 定义的插件。这些方法虽然可以解决问题，但可能会降低代码质量和可维护性。因此，建议在实际情况中谨慎使用。