Question

这是具有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中。这是我目前的操作方式，并且可以与其他部分配合使用，但是，如何接收包含单个对象而不是一个数组的“ tech”部分？

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}  
     />
   })

Answer 1

假设tech道具的渲染是以一种简单的方式实现的，如下所示：

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

然后，您可以将字符串数组映射到React元素数组：

<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(', ')}

如何遍历对象内的嵌套数组？

1 个答案: