React组件Props缺失ESLint prop-types验证问题求助

这个警告是因为ESLint要求你为React组件的Props添加类型验证，避免传递错误类型的参数。下面是两种解决方式：

方式一：使用prop-types添加Props验证（推荐） #

这是符合ESLint规则的标准做法，能提升代码的健壮性。

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

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

2. 修改你的Order组件代码，导入prop-types并定义Props类型：

import PropTypes from 'prop-types';

export function Order(props) {
  const { id, img, title, description, price } = props;
  return (
    <>
      <div id={`product-id-${id}`}>
        <img
          id={`product-image-${id}`}
          className="product-image"
          src={img}
          alt="This is a product image"
        />
        <h3 className="order-title">{title}</h3>
        <p>{description}</p>
        <p className="price">${price}</p>

        <div>
          <button id={id.toString()} className="order-btn">
            Add to Cart
          </button>
        </div>
      </div>
    </>
  );
}

// 定义Props的类型验证
Order.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  img: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  price: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
};

// 可选：添加默认Props（如果需要）
Order.defaultProps = {
  description: '暂无描述'
};

注：顺便修正了模板里多余的$符号，比如<h3 className="order-title">${title}</h3>改成了{title}，避免显示多余的美元符号

方式二：关闭ESLint的prop-types规则（不推荐） #

如果暂时不想做Props验证，可以在ESLint配置文件（比如.eslintrc.js）里关闭这条规则：

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

这种方法虽然能快速消除警告，但会失去类型检查的保护，不建议在生产项目中使用。

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