如何在 React JS 中从数组中渲染多个图像？答案

【问题标题】：How to render multiple images from array in React JS?如何在 React JS 中从数组中渲染多个图像？
【发布时间】：2020-04-27 04:22:35
【问题描述】：

每个人。我对 React Js 相当陌生，在尝试从数组中渲染图像时遇到了困难。我的代码是：

import { home } from "../homeObj";


const Logos = ({ title, img, img2, img3, key }) => {
    return (
        <>
            <div className={styles.anaShif} key={key}>
                <h2 className={styles.h2}> {title} </h2>
                <div className={styles.logos}>
                    <img
                        id={img.id}
                        src={img}
                        alt={img.alt}
                        className={styles.img}
                        srcSet={`${img2} 2x, 
                        ${img3} 3x`}
                    />
                </div>
            </div>
        </>
    );
};

function Trusted() {
    const logoComponent = home.map((_objects, i, id) => {
        if (home[i].id === "logos") {
            return (
                <>
                    <Logos
                        key={i}
                        id={id}
                        title={home[i].title}
                        img={home[i].logos[i].src}
                    />
                </>
            );
        }
    });

    return (
        <>{logoComponent}</>

        );
    }

    export default Trusted;

和{家}：

export const home = [

{
        id: "logos",
        title: "Welcome to",
        logos: [
            {
                id: 1,
                alt: "car",
                src: require("./logo_06.png"),
                src2: require("./logo_06@2x.png"),
                src3: require("./logo_06@2x.png"),
            },
            {
                id: 2,
                alt: "red-car",
                src: require("./logo_07.png"),
                src2: require("./logo_07@2x.png"),
                src3: require("./Tlogo_07@3x.png"),
            },
        ],
]

发生的情况是我只能显示 logos 数组的第二个元素的图像，就像 React Js 完全跳过了第一个元素（id，img.src，alt）。

我想要做的是能够同时显示两个图像并动态添加元素，当一个新元素被添加到 {home} 时，它应该在没有硬编码的情况下显示。

任何帮助将不胜感激。

【问题讨论】：

您正在对 home 进行迭代，而应该对徽标进行迭代。根据 type==='logos' 过滤主页，然后迭代 logos 数组。

标签： arrays reactjs

【解决方案1】：

您必须返回当前代码中未出现的徽标图。因此，您只会得到一个 Logos 组件。

import React from 'react';
import { home } from '../homeObj';

const Logos = ({ title, img, img2, img3, key }) => {
  return (
    <>
      <div className={styles.anaShif} key={key}>
        <h2 className={styles.h2}> {title} </h2>
        <div className={styles.logos}>
          <img
            id={img.id}
            src={img}
            alt={img.alt}
            className={styles.img}
            srcSet={`${img2} 2x, 
                        ${img3} 3x`}
          />
        </div>
      </div>
    </>
  );
};

function Trusted() {
  const logosIndex = home.findIndex((obj) => obj.id === 'logos');
  const logos = home[logosIndex].logos.map(({ id, alt, src }) => {
    return <Logos key={id} id={id} title={home[logosIndex].title} img={src} />;
  });

  return logos;
}

export default Trusted;

【讨论】：

【解决方案2】：

您不仅需要映射home，还需要在每个home 对象中映射logos 数组。同样在您的情况下，您不需要作为整个数组的第三个参数。

像这样简化您的代码：

home.map((_objects, i) => {
    if (_objects.id === "logos") {
        return (
            <>
                {
                    _objects.logos.map(logo => ( 
                        <Logos
                            key={logo.id}
                            id={logo.id}
                            title={logo.title}
                            img={logo.src}
                        />
                    ))
                }
            </>
        );
    }else {
        return null
    }
}

【讨论】：

【解决方案3】：

不用多说，也可以这样写。

home.filter((_objects, i) => _objects.id === 'logos')
.map(({logos})=>logos.map(logo=>
  <Logos
    key={logo.id}
    {...logo}
/>))

【讨论】：