在 React 中将对象作为 prop 传递的正确方法是什么？

Question

我想将图像 URL 的对象作为道具传递给子组件，并在图像组件的 src 属性中使用它。但是，我不断收到一条错误消息，指出我的对象键（image1、2 或 3）未定义。我在没有解构的情况下尝试过，同样的事情发生了。我做错了什么？

带 url 的对象

const imgUrls = {
        image1: '/images/exodevo.webp',
        image2: '/images/njordic.webp',
        image3: '/images/geotechniek.webp',
    }

父组件 (ProjectSection.js)

  <div className="col-md-6 col-lg-4 px-0" data-aos="flip-left">
     <ProjectPreview title={"ExoDevo"} content={"This was a website I built for ExoDevo during my internship at NC-Websites."} techs={"HTML/CSS/JS"} images={{...imgUrls}} website={"https://www.exodevo.com"} />
  </div>

子组件中的图像组件ProjectPreview.js

  <Image
    src={props.images}
    alt={props.title}
    width={335}
    height={210}
  />

Answer 1

我已经发现我做错了什么。而不是这个：

  <ProjectPreview title={"ExoDevo"} content={"This was a website I built for ExoDevo during my internship at NC-Websites."} techs={"HTML/CSS/JS"} images={{...imgUrls}} website={"https://www.exodevo.com"} />

我应该这样做的：

 <ProjectPreview title={"ExoDevo"} content={"This was a website I built for ExoDevo during my internship at NC-Websites."} techs={"HTML/CSS/JS"} {...imgUrls} website={"https://www.exodevo.com"} />

Answer 2

我建议您将图像数组传递到 <ProjectPreview /> 组件中。然后，遍历它以显示 <Image /> 组件。

ProjectSection.js:

const images = Object.values(imgUrls);

return (
  <div className="col-md-6 col-lg-4 px-0" data-aos="flip-left">
     <ProjectPreview title="ExoDevo" content="This was a website I built for ExoDevo during my internship at NC-Websites." techs="HTML/CSS/JS" images={images} website="https://www.exodevo.com" />
  </div>
);

ProjectPreview.js:

return (
   <>
     {/* Other stuff */}
     {props.images.map((src) => (
        <Image src={src} />
     ))}
   </>
);

在 React 中将对象作为 prop 传递的正确方法是什么？

What is the correct way to pass an object as prop in React?

javascript

node.js

reactjs