Question

我目前正在使用bootstrap并希望我的输出位于某个网格中。因此，我需要将我的数组分组成3个堆，然后将它们放入一个类名为“row”的div中。数组的分组已经完成，但我不知道如何从这里继续，因为不再渲染，我只在一行atm中渲染1个元素。

阵列：

const itemsToRender = [{
  id: '1',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '2',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '3',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '4',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '5',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '6',
  name: 'Item1',
  image: 'item1.png'
  }]

分组：

function splitArrayIntoChunks(arr, chunkLen){
  var chunkList = []
  var chunkCount = Math.ceil(arr.length/chunkLen)
  for(var i = 0; i < chunkCount; i++){
      chunkList.push(arr.splice(0, chunkLen))
  }
  return chunkList}

var chunks = splitArrayIntoChunks(itemsToRender, 3)

组件代码：

return (
  <div className="container">
    <div className="row">
      {itemsToRender.map(item => (
      <Item key={item.id} item={item}/>
      ))}
    </div>
 </div>
 )

我想要的结果应该是这样的：

<div class="container">
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
        </div>
        <div class="row">
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
        </div>
</div>

Answer 1

你可以使用类似这样的功能：

const rows = items.map((x,i) => {
  return i % 3 === 0 ? items.slice(i, i+3) : null;
}).filter(x => x != null);

使用下面的Bootstrap查看

＆＃13;

const items = [{
  id: '1',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '2',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '3',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '4',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '5',
  name: 'Item1',
  image: 'item1.png'
  }, {
  id: '6',
  name: 'Item1',
  image: 'item1.png'
  }]

const App = () => {
  const rows = items.map((x,i) => {
      return i % 3 === 0 ? items.slice(i, i+3) : null;
  }).filter(x => x != null);

  return (
    <div>
      {rows.map((row, index) => {
        return (<div className="row" key={index}>
          {row.map(col => <div className="col-4">{col.name}</div>)}
        </div>);
       })}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

span {
 margin-left: 5px;
 margin-right: 5px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="root"></div>

＆＃13;

Answer 2

您可以使用.slice编写一种将数组划分为卡盘的方法请注意，与.splice不同的<script type="text/javascript" src="/dist/bundle.js"></script> 不会改变原始数组。

看起来像这样：

.slice

<小时/> 这是一个正在运行的例子：

＆＃13;

const makeChunks = (array = [], numOfChuncks = 1) => {
  let chunks = [];
  let currentChunck = 0;

  while (currentChunck < array.length) {
    chunks.push(array.slice(currentChunck, currentChunck += numOfChuncks));
  }

  return chunks;
}

＆＃13;

const makeChunks = (array = [], numOfChuncks = 1) => {
  let chunks = [];
  let currentChunck = 0;

  while (currentChunck < array.length) {
    chunks.push(array.slice(currentChunck, currentChunck += numOfChuncks));
  }

  return chunks;
}


const itemsToRender = [{
  id: '1',
  name: 'Item1',
  image: 'item1.png'
}, {
  id: '2',
  name: 'Item2',
  image: 'item1.png'
}, {
  id: '3',
  name: 'Item3',
  image: 'item1.png'
}, {
  id: '4',
  name: 'Item4',
  image: 'item1.png'
}, {
  id: '5',
  name: 'Item5',
  image: 'item1.png'
}, {
  id: '6',
  name: 'Item6',
  image: 'item1.png'
}];

const groupedBy3 = makeChunks(itemsToRender, 3);

const Item = ({ item }) => (
    <div className="col-xs-3">{item.name}</div>
);

class App extends React.Component {
  render() {
    return (
      <div className="container">
        {Object.keys(groupedBy3).map(key => {
          return (
            <div key={key} className="row">
              {
                groupedBy3[key].map(item => (<Item key={item.id} item={item} />))
              }
            </div>
          )
        })}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

＆＃13;

将数组输出到一个名为“row”的新div之后的4个元素

2 个答案: