通过嵌套对象映射以显示图像 NextJS

Question

我必须制作一些可重复的组件，我想知道是否可以通过一个对象进行映射以获得这样的结果：desired result

首先，我创建了对象，存储了所有的数据：

const tehnologii = [
  {
    title: "Programare",
    tech: {
      name: ["Python", "Java", "C++", "Git"],
      img: ["python", "java", "cpp", "git"]
    },
  },
  {
    title: "Web Development",
    tech: {
      name: ["html", "css", "javascript", "react", "php", "laravel", "c-sharp", "dot NET"],
      img: ["html", "css", "javascript", "react", "php", "laravel", "c-sharp", "net"]
    },
  },
  {
    title: "Design",
    tech: {
      name: ["photoshop", "illustrator", "invision", "miro", "zeplin"],
      img: ["photoshop", "illustrator", "invision", "miro", "zeplin"]
    },
  },
  {
    title: "DevOps",
    tech: {
      name: ["docker", "jenkins", "ansible", "aws", "terraform"],
      img: ["docker", "jenkins", "ansible", "aws", "terraform"]
    },
  },
  {
    title: "Skill-up",
    tech: {
      name: ["sql", "mysql", "scrum", "linux"],
      img: ["sql", "mysql", "scrum", "linux"]
    },
  },
  {
    title: "Testare",
    tech: {
      name: ["testare software", "selenium"],
      img: ["testare", "selenium"]
    },
  },
  {
    title: "Alte Cursuri",
    tech: {
      name: ["Excel"],
      img: ["excel"]
    },
  }
 
];

通常我使用这样的东西来映射对象并显示图像：

{tehnologii.map((tech, index) => (
    <Column key={index}>
      <img src={require(`./img/${tech.img}.svg`).default.src} alt={tech.name} />
    </Column>
  ))}

但这仅适用于这样的基本结构：

const tehnologii = [
  {
    name: "amdaris",
    img: "amdaris",
  },
  {
    name: "unifiedPost",
    img: "unified-post",
  },
]

如何映射更复杂的结构（如上图所示），以便获得带有标题的组件，其中包含所包含技术的图像？

附注我使用了.default.src，因为我正在使用 NextJS

Answer 1

希望以下内容对你有所帮助！

{tehnologii.map((item, index) => (
    <div key={index}>
       <h1>{item.title}</h1>
       <Column>
         <img src={require(`./img/${item.tech.img}.svg`).default.src} alt={tech.name} />
       </Column>
    </div>
  ))}