Map React JS: отображение данных с колонкой

Question

Я использую метод карты в ReactJS, в рендере.

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

Так что это работает, но проблема результатов отображения.

Я бы хотел иметь 4 элемента по столбцам ... но я не знаю, как мне это сделать.Точно, я использую Flexbox в CSS.

Спасибо за вашу помощь

Answer 1

вы можете использовать ROW AND COL из 'antd' или из 'bootstrap', это будет выглядеть следующим образом // пример

import {Row,Col} from 'antd'

// функция для рендеринга данных

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

// в вашем jsx используйте это

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

Answer 2

Вы можете разделить ваш массив на куски, прежде чем обрабатывать его для рендеринга.

скажем, если у вас есть 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});
}

Render

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

PS Однако лучше использовать некоторое свойство overflow-y:hidden css с минимальными усилиями.