在 3 个重复组件中渲染 1 个图像

Question

我对 React JS 比较陌生，遇到了我的第一个障碍。

我有一个呈现 3 条信息的组件，每条信息都需要一张不同的图像。看到这张图片：

这显然是每张图像，渲染了 3 次而不是一次。 它应该看起来像这样：

唯一的问题是，有 3 张图像，如果有意义的话，我不确定如何在每个组件上反映彼此的图像。我尝试了几种方法，但最终要么得到 1 张图像，要么得到全部 3 张图像。这很有意义，因为我渲染了该组件 3 次，所以我理解我的错误，但在这种情况下最好的解决方案是什么？

我目前的做法：

const images = [
    {
        id: "img1",
        source: require("../../assets/images/image-retro-pcs.jpg")
    },
    // {
    //     id: "img2",
    //     source: require("../../assets/images/image-top-laptops.jpg")
    // },
    // {
    //     id: "img3",
    //     source: require("../../assets/images/image-gaming-growth.jpg")
    // }
];

const FooterItem = (props) => {
    const imageSource = images.map((image) => 
        <img 
            src={image.source} 
            alt="" 
            className={classes.image} 
            key={image.id}
        />)

    return (
        <div className={classes.itemContainer}>
            {imageSource}
            <div className={classes.footerItems}>
                <h2 className={classes.h2}>{props.number}</h2>
                <h3 className={classes.h3}>{props.title}</h3>
                <p className={classes.p}>{props.info}</p>
            </div>
        </div>
    );
};

export default FooterItem;

因此，将这 2 个注释掉后，我们在每个正确的组件中得到 1 个图像。

其他组件代码为：

const Footer = () => {
  return (
    <div className={classes.footer}>
        <FooterItem 
            number="01"
            title="Reviving Retro PCs"
            info="What happens when old PCs are given modern upgrades?"
        />
        <FooterItem 
            number="02"
            title="Top 10 Laptops of 2022"
            info="Our best picks for various needs and budgets."
        />
        <FooterItem 
            number="03"
            title="The Growth of Gaming"
            info="How the pandemic has sparked fresh opportunities."
        />
    </div>
  );
};

不渲染 3 张图像而是渲染 1 张图像的最佳 3 是什么？ forEach 循环？ 提前感谢您的帮助。

Answer 1

您可以再发送一个包含图像 ID 的道具：

CODESANDBOX

<FooterItem
        number="01"
        title="Reviving Retro PCs"
        info="What happens when old PCs are given modern upgrades?"
        imageId="img1"
      />

在

FooterItem

内部，您可以使用find

作为

imageID图像：

const image = images.find((o) => o.id === props.imageId);

并将其呈现为：

<div className={classes.itemContainer}>
      {image ? (
        <img
          src={image.source}
          alt=""
          className={classes.image}
          key={image.id}
        />
      ) : null}
      <div className={classes.footerItems}>
        <h2 className={classes.h2}>{props.number}</h2>
        <h3 className={classes.h3}>{props.title}</h3>
        <p className={classes.p}>{props.info}</p>
      </div>
    </div>

---

为了进一步改进您的代码，您可以创建一个包含所有页脚数据的对象数组，然后将其呈现为：

CODESANDBOX

const Footer = () => {
  const footerData = [
    {
      number: "01",
      title: "Reviving Retro PCs",
      info: "What happens when old PCs are given modern upgrades?",
      imageId: "img1"
    },
    {
      number: "02",
      title: "Top 10 Laptops of 2022",
      info: "Our best picks for various needs and budgets.",
      imageId: "img2"
    },
    {
      number: "03",
      title: "The Growth of Gaming",
      info: "How the pandemic has sparked fresh opportunities.",
      imageId: "img3"
    }
  ];
  return (
    <div className={classes.footer}>
      {footerData.map((o) => {
        return (
          <FooterItem
            key={o.number}
            number={o.number}
            title={o.title}
            info={o.info}
            imageId={o.imageId}
          />
        );
      })}
    </div>
  );
};