React项目中Eslint提示'roles'缺失Props验证的问题求助

1. ESLint警告的原因 #

这个警告是因为你开启了ESLint的react/prop-types规则，该规则要求React组件接收的所有props必须做类型校验。你的ProRoute组件接收了roles作为props，但没有为它定义对应的propTypes，因此触发了该警告。

2. 语法正确性确认 #

你代码里的语法完全正确：

• 组件解构赋值中的{ roles = [] }是正确的默认值写法，确保未传递roles时，组件会使用空数组作为默认值。
• JSX中传递roles={['ROLE_ADMIN']}的写法也没问题：大括号{}是JSX中嵌入JavaScript表达式的标准语法，方括号[]用来创建包含单个字符串元素的数组，符合语法规范。

3. 修复警告的方法 #

先安装prop-types包（未安装的话）：

npm install prop-types --save

然后在ProRoute组件文件中添加propTypes定义：

import PropTypes from 'prop-types';

const ProRoute = ({ roles = [] }) => {
  const userRoles = service.getCurrentUser()?.roles;
  const isAuthorized = !roles.length || roles.some((r) => userRoles.includes(r));

  // ... 剩余组件逻辑
};

// 定义props的类型校验
ProRoute.propTypes = {
  // 指定roles是字符串数组类型，因设置了默认值，所以为可选属性
  roles: PropTypes.arrayOf(PropTypes.string)
};

export default ProRoute;

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