React报错：parameter缺失props validation，求助有效解决方案

这个报错来自ESLint的react/prop-types规则，要求组件接收的props必须定义类型验证。以下是几种可行的解决方式：

方式一：使用PropTypes定义props验证 #

1. 先安装prop-types包：

npm install prop-types
# 或
yarn add prop-types

2. 修改Pp.jsx代码，添加props验证：

import PropTypes from 'prop-types';

export default function Pp({ parameter }) {
  return (
    <h1>{parameter}</h1>
  )
}

Pp.propTypes = {
  parameter: PropTypes.string.isRequired // 若该props必填则加.isRequired，可选则去掉
};

方式二：使用TypeScript定义props类型（适用于TS项目） #

如果你的项目使用TypeScript，直接为组件的props定义接口即可：

interface PpProps {
  parameter: string;
}

export default function Pp({ parameter }: PpProps) {
  return (
    <h1>{parameter}</h1>
  )
}

方式三：临时关闭ESLint规则（不推荐） #

如果只是想临时跳过该验证，可以在Pp.jsx文件顶部添加注释关闭这条规则：

/* eslint-disable react/prop-types */

export default function Pp({ parameter }) {
  return (
    <h1>{parameter}</h1>
  )
}

或者在项目的.eslintrc或.eslintrc.js文件中修改规则：

{
  "rules": {
    "react/prop-types": "off"
  }
}

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