函数组件解构接收Props时ESLint报「缺失props验证」错误求助

问题背景 #

我是React新手，正在做第一个React项目，跟着线上课程示例用解构方式在函数组件中接收Props，但ESLint一直抛出「galleryObj及其属性缺失props验证」的错误，查了资料还是困惑，附上代码和错误信息求指导。

问题代码 #

import PageNav from "../components/PageNav";
import "./Work.module.css";

const galleryData = [
    {
        name: "Pixel Art 1",
        description: "Blah blah blah",
        openModal: false,
    },
    {
        name: "Pixel Art 2",
        description: "Blah blah bla",
        openModal: false,
    },
    {
        name: "Pixel Art 3",
        description: "Blah bah blah",
        openModal: false,
    },
];

export default function PixelArt() {
    return (
        <main className="workPageGrid">
            <PageNav />
            <div className="galleryList">
                <GalleryList />
            </div>
        </main>
    );
}

function GalleryList() {
    const galleries = galleryData;
    console.log(galleries);

    const numGallery = galleries.length;
    console.log(numGallery);

    return (
        <main className="galleryList">
            <h2>wtf</h2>

            {numGallery > 0 ? (
                <ul className="galleries">
                    {galleries.map((gallery) => (
                        <Gallery galleryObj={gallery} key={gallery.name} />
                    ))}
                </ul>
            ) : (
                <p>fml :)</p>
            )}
        </main>
    );
}

function Gallery({ galleryObj }) {
    console.log(galleryObj);

    if (galleryObj.openModal) return null;

    return (
        <li className={`gallery ${galleryObj.openModal ? "open-modal" : ""}`}>
            {" "}
            <div>
                <h2>{galleryObj.name}</h2>
                <p>{galleryObj.description}</p>
            </div>
        </li>
    );
}

ESLint错误信息（中文翻译） #

galleryObj
galleryObj.openModal
galleryObj.name
galleryObj.description
均缺失Props验证 eslint(react/prop-types)

解决方法 #

方法1：使用prop-types库定义Props验证（推荐） #

这是React官方推荐的最佳实践，能明确组件接收的Props类型，提升代码可读性和可维护性。

1. 安装prop-types依赖：

npm install prop-types --save

2. 在代码中导入prop-types，并给Gallery组件添加验证规则：
   修改后的Gallery组件代码如下：

import PropTypes from 'prop-types';

// ... 其他代码保持不变

function Gallery({ galleryObj }) {
    console.log(galleryObj);

    if (galleryObj.openModal) return null;

    return (
        <li className={`gallery ${galleryObj.openModal ? "open-modal" : ""}`}>
            {" "}
            <div>
                <h2>{galleryObj.name}</h2>
                <p>{galleryObj.description}</p>
            </div>
        </li>
    );
}

// 定义Props验证规则
Gallery.propTypes = {
    galleryObj: PropTypes.shape({
        name: PropTypes.string.isRequired,
        description: PropTypes.string.isRequired,
        openModal: PropTypes.bool.isRequired
    }).isRequired
};

方法2：临时关闭ESLint规则（不推荐） #

如果只是想临时跳过检查，可以在组件上方添加注释，但长期这么做会丢失类型检查的好处：

// eslint-disable-next-line react/prop-types
function Gallery({ galleryObj }) {
    // ... 组件原有代码
}

也可以在项目ESLint配置文件中全局关闭react/prop-types规则，但这会影响整个项目的Props检查，不建议新手使用。

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