Javascript 如何循环对象中的嵌套数组？

这是一个包含3个对象的JSON文件

export const Projects = [
  {
    id: 1,
    name: 'Site 1',
    tech: [
      'HTML',
      'CSS',
      'SASS',
      'React'
    ],
    description: 'Lorem1',
    image: '/Image4.jpg'
  },
  {
    id: 1,
    name: 'Site 2',
    tech: [
      'HTML',
      'CSS',
      'SASS',
      'React'
    ],
    description: 'Lorem2',
    image: '/Image4.jpg'
  },
  {
    id: 1,
    name: 'Site 3',
    tech: [
      'HTML',
      'CSS',
      'SASS',
      'React'
    ],
    description: 'Lorem3',
    image: '/Image4.jpg'

  }
];

我试图通过“tech”数组循环并返回每个项目。当我循环遍历它们时，现在我只能得到完整的数组，并且只能将它们全部放入一个div中。这就是我目前的做法，它与其他部分配合得很好，但是，我如何接收单个对象的“技术”部分，而不是一个数组

const Portfolio = () => {
   const portfolioItem = Projects.map((project, i) => {
     return <Item
     key={i}
     image={Projects[i].image}
     description={Projects[i].description}
     name={Projects[i].name}
     tech={Projects[i].tech}  
     />
   })

const公文包=（）=>{
const portfolioItem=Projects.map（（project，i）=>{
返回
})

假设

tech

prop的渲染以简单的方式实现，如下所示：

const Item = ({tech}) => <div>{tech}</div>

---

那么你现在想要什么呢？现在还不清楚什么是

项目

？如果你的自定义组件，你需要在该组件内处理

技术

（请共享你的代码）。如果它来自某个库，是哪一个？嘿，我正要发布Item component的示例代码。你的假设是正确的，你的答案正是我想要的！我想得太多了，要的解决方案太复杂了。非常感谢！

<Item
  key={i}
  image={Projects[i].image}
  description={Projects[i].description}
  name={Projects[i].name}
  tech={Projects[i].tech.map((t) => <span>{t}</span>)}  
/>

     tech={Projects[i].tech.join(', ')}