Question

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

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

所以它有效，但显示的问题结果。

我希望按列列出4个项目..但我不知道如何才能这样做。我确切地说，我在CSS中使用Flexbox。

感谢您的帮助

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

使用splice as

将此数组处理成块

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> 
    )}  
)}

P.S。但是，如果能够最小化地使用css的某些overflow-y:hidden属性，那就更好了。

Answer 2

你可以使用＆＃39; antd＆＃39;或者来自＆＃39; bootstrap＆＃39; 它看起来像这样 //示例

import {Row,Col} from 'antd'

//用于渲染数据的函数

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

//在你的jsx中使用这个

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

映射React JS：使用列显示数据

2 个答案: