reactjs - 如何在 React Js 中映射二维数组

Question

项目.js

 constructor() {
  super();
  this.state = {
     projects: [] 
  }
}

componentWillMount() {
  this.setState({
     projects: [
        {
           link: '/',
           img: 'img.jpg',
           title: 'Title',
           date: 'Jul 2017',
           description: 'Description',
           icons: 
           [
              {
                 src: 'icon.svg',
                 content: 'Content'
              },
              {
                 src: 'icon2.svg',
                 content: 'Content 2'
           ]
        }
     ]
   });
  }

render() {
   return (
      <section className="projects">
         <ProjectsList projects={this.state.projects} />
      </section>
   );
  }
}

项目列表.js

let projectItems;

projectItems = this.props.projects.map(project => {
  return (
    <ProjectItem key={project.title} project={project}  />
  ) 
});

return (
   <div id="projectsList">
     {projectItems}
   </div>
)

我想创建一个底部有图标列表的项目卡片。我可以映射项目数组，但图标不起作用。有人知道如何在 ReactJs 中映射这个二维数组吗？谢谢!

Answer 1

只需再次使用 map :

projectItems = this.props.projects.map(project => {
  return (
    <div>
      <ProjectItem key={project.title} project={project}  />
      { 
        project.icons.map(i => <img key={i.src} src={i.src} alt="" />) 
      }
    </div>
  ) 
});

你当然可以在 ProjectItem 中完成它