HTMLベースのレイアウトを使用して配列を子コンポーネントにマッピングする

Question

オブジェクトの配列をpropsにマッピングし、これをリアクションの子コンポーネントにレンダリングします。

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

ただし、この結果、親子出力が発生し、各反復で新しい行が生成されます。財団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> 

内で定義されたレイアウトの枠組みを使用

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

ような問題は、私はHTML行を閉じる前にデータ上に三回反復する必要があります。このレイアウトを制御し、3つのタイトルを繰り返し/マップし、新しい行で中断して続行する最も簡単な方法は、マップを使用できますか？

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> 

を