通过解构/函数组件接收道具 - 错误“道具验证中缺失”

Question

我已经为此工作了大约两天，我将继续努力，但我认为在我继续努力的同时可能是时候获得一些指导了。这是我的第一个反应项目，我有点困惑。我一直在网上上课，我的导师通过使用功能组件进行解构来接收道具的示例，我遵循并一次又一次地重写，但我不断收到错误“道具验证中缺失”。我正在使用 ESLint。

我真的很喜欢编码，而且我不是学得最快的人，但想了解我做错了什么。

讲师的代码示例根本不使用 .props，所以我很困惑。我知道接收道具有不同的方式，所以我对通过解构接收道具特别感到困惑。感谢您的任何指导。我参考了这些文章以及许多堆栈溢出问题：

https://www.npmjs.com/package/prop-types https://legacy.reactjs.org/docs/components-and-props.html https://codedamn.com/news/reactjs/best-practices-for-passing-props- Between-components https://dev.to/colocodes/react-class-components-vs-function-components-23m6

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
are missing in props validation eslint(react/prop-types)

Answer 1

讲师可能没有在他们的项目中使用 ESLint，或者正在使用 ESLint 但没有配置 React 规则。

如果在没有 ESLint 的情况下允许编译该代码，则可以正常工作。您正在使用的 ESLint 规则，例如

react/prop-types

正在尝试鼓励最佳实践。

在这种情况下，该规则特别要求每个组件都使用 React prop types 功能。实际上，这是可选的。正是 ESLint 规则使其成为必需并阻止代码编译，因为它不符合此 ESLint 规则试图强制执行的最佳实践。

在组件上声明 prop 类型意味着更难滥用组件，因为每个 prop 的数据类型（包括 prop 是否可选）在运行时由该 prop 类型配置进行验证。这意味着如果有人（在这种情况下，作为唯一的开发人员，就是你）错误地使用了该组件，他们会得到一个错误，而不是一些不确定的错误行为。

在你的例子中，只有

Gallery

组件接受 props，具体来说，它接受

galleryObj

prop，它是一个包含

name

、

description

和

openModal

prop 的对象。前两个应该是字符串，最后一个应该是布尔值。所以我们可以像这样定义 prop 类型：

// Add new import line
import { PropTypes } from "prop-types"; 

// ... Existing code

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>
    );
}

Gallery.propTypes = {
    galleryObj: PropTypes.shape({
        name: PropTypes.string.isRequired,
        description: PropTypes.string.isRequired,
        openModal: PropTypes.bool.isRequired,
    }),

}

请注意，如果您还没有

prop-types

NPM 包，您需要将其添加到您的项目中。