使用基于 HTML 的布局将数组映射到子组件答案

【问题标题】：Mapping array into child component using HTML based layout使用基于 HTML 的布局将数组映射到子组件
【发布时间】：2017-01-17 01:51:33
【问题描述】：

我正在将一组对象映射到 props 并在 React 子组件中呈现这些对象。

<div className="App">
    {projects.map(projectData => <ProjectPreview key={projectData.id} {...projectData} />)}
</div>

但是，这会导致父子输出，每次迭代都会产生一个新行。

<div className="row">
<div className="small-4">{this.props.title}</div>
</div>
<div className="row">
<div className="small-4">{this.props.title}</div>
</div>

使用布局框架，例如 Foundation HTML 列在行内定义

<div className="row">
<div className="small-4">{this.props.title}</div>
<div className="small-4">{this.props.title}</div>
<div className="small-4">{this.props.title}</div>
</div>

问题是我需要在关闭 HTML 行之前对数据进行三次迭代。控制此布局并迭代/映射三个标题然后中断并在新行中继续的最简单方法是什么，我可以使用映射吗？

【问题讨论】：

标签： arrays sorting reactjs

【解决方案1】：

这可能是因为 ProjectPreview 组件渲染了<row>。

// ProjectPreview Component
render() {
  <div className="row">
    <div className="small-4">{this.props.title}</div>
  </div>
}

理想情况下应该是这样的：

// App
projectData1 = [
  { id: 1, title: 'title 1', columns: 4 },
  { id: 2, title: 'title 2', columns: 4 },
  { id: 3, title: 'title 3', columns: 4 },
];
projectData2 = [
  { id: 4, title: 'title 4', columns: 6 },
  { id: 5, title: 'title 5', columns: 6 },
];
render() {
  <div className="app">
    <ProjectPreviewRow projectData={projectData1} />
    <ProjectPreviewRow projectData={projectData2} />
  </div>
}

// ProjectPreviewRow Component
render() {
  <div className="row">
    {projects.map(projectData => <ProjectPreviewItem key={projectData.id} {...projectData} />)}
  </div>
}

// ProjectPreviewItem Component
render() {
  <div className={`small-${this.props.columns`}>
    {this.props.title}
  </div>
}

这会给你：

<div class="app">
  <div class="row">
    <div class="small-4">title 1</div>
    <div class="small-4">title 2</div>
    <div class="small-4">title 3</div>
  </div>
  <div class="row">
    <div class="small-6">title 4</div>
    <div class="small-6">title 5</div>
  </div>
</div>

【讨论】：