时间戳

首页 > 解决方案 > Map React JS：用列显示数据

reactjs - Map React JS：用列显示数据

问题描述

我在渲染中使用 ReactJS 中的 map 方法。

<div>
{this.state.allFolders.map((folder)=>                                                                               
<p>{folder.name}</p>                                                                           
)}
</div>

所以它可以工作，但是显示的问题结果。 在此处输入图像描述

我想按列有4个项目..但我不知道该怎么做。我准确地说，我在 CSS 中使用 Flexbox。

谢谢您的帮助

标签： reactjsflexbox

解决方案

您可以使用“antd”或“bootstrap”中的 ROW AND COL，它看起来像这样 //example

import {Row,Col} from 'antd'

//渲染数据的函数

_renderData(){
    item.map((res, key)=>{
     <Col>
       <p>{res.name} </p>
     </Col>
   })
}

//在你的jsx中使用这个

<Row> {this_renderData()} </Row>

推荐阅读