Question

我将一个对象数组映射到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行之前迭代数据三次。什么是最简单的方法来控制这个布局并迭代/映射三个标题，然后在新行中断和继续，我可以使用地图吗？

Answer 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>

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

1 个答案: