vscode报错：‘XXX‘ is missing in props validation

前引

写React+vite+Ant Design项目：在写一个函数组件时，想要将一个组件当参数传入。即，高阶组件:把一个组件当成另外一个组件的参数传入 然后通过一定的判断 返回新的组件，然后遇到了这个props验证的问题

报错原因

原因是eslint在使用了"plugin:react/recommende"对react检查时，会使用prop-types规则进行检查，此时type缺少props验证

解决措施

1. 在eslint中，会默认使用react/prop-types检查，我们把它关掉就好了。

"overrides": [
    {
        files: ["**/*.tsx"],
        rules: {
            "react/prop-types": "off"
        }
    }
]

2. 使用props校验

实现步骤

1. 安装属性校验包：yarn add prop-types
2. 导入prop-types 包
3. 使用 组件名.propTypes = {} 给组件添加校验规则

import PropTypes from 'prop-types'
function AuthRoute({ children }) {
  const isToken = getToken()
  if (isToken) {
    return <>{children}</>
  } else {
    return <Navigate to="/login" replace />
  }
}
AuthRoute.propTypes = {
  children: PropTypes.object,
}