Map React JS：用列显示数据答案

【问题标题】：Map React JS : Displaying data with columnMap React JS：用列显示数据
【发布时间】：2018-06-05 22:10:04
【问题描述】：

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

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

所以它可以工作，但是显示的问题结果。

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

感谢您的帮助

【问题讨论】：

尝试 Object.keys(this.state,allFolders).map 代替，map 不是 js-Objects 的内置函数
你使用 CSS 框架吗？
@physi 我假设allFolders 是一个数组，所以他可以访问Array.prototype.map？
但是关于主题：这个问题与反应无关，这是一个 Css 问题，没有任何关于 css 的信息，没有人可以帮助你

标签： reactjs flexbox

【解决方案1】：

您可以在处理数组进行渲染之前将其分成块。

如果你有一个array = [1,2,3,4,5,6,7,8] 分成 3 个块 [ [1,2,3],[4,5,6],[7,8] ]

操纵

this.state = {
  allFolders:[] //myarray initially in constructor
}

将这个数组处理成块，拼接为

chunkArray(myArray, chunk_size){
    var results = [];

    while (myArray.length) {
        results.push(myArray.splice(0, chunk_size));
    }

    return results;
}

您现在可以将数组设置为块、componentWillMount() 或在将组件置于状态后重新渲染组件的其他函数中。

componentWillMount(){
  let allFolders = Object.assign([],this.state.allFolders);
  allFolders = chunkArray(allFolders,4); //creates a chunk of 4 arrays.
  this.setState({allFolders});
}

渲染

{this.state.allFolders.map((item)=>  
    {item.map((folder)=>   //will run every chunk. i.e. 4 times in your case                                                                          
      <p>{folder.name}</p> 
    )}  
)}

附：但是，如果您能以最小的努力使用 css 的一些 overflow-y:hidden 属性会更好。

【讨论】：

【解决方案2】：

您可以使用来自 'antd' 或来自 'bootstrap' 的 ROW AND COL 它看起来像这样 //示例

import {Row,Col} from 'antd'

//渲染数据的函数

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

//在你的jsx中使用这个

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

【讨论】：