数组通过多个项目呈现对象，而不仅仅是一个

Question

我可以在一个容器中渲染几个对象吗？例如，我有数组

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
array.map((item, index) => (
<div>
 <div> item 1, 2, 3 </div>
 <div> item 4, 5, 6 </div>
 <div> item 7, 8, 9 </div>
</div
)

Answer 1

您可以使用array#slice拆分数组，然后使用array#map一次显示一个数据块。

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var Div = () => {
  return(
    <div>
    {array
    .map((item, index, array) => 
      index % 3 === 0 ? array.slice(index, index+3) : null)
    .filter(x => x)
    .map((item, index) => (<div>item {item.join(', ')}</div>))}
    </div>
  );
};

ReactDOM.render(<Div />,document.getElementById('container'));

<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>
<div id='container'></div>