數組呈現物體的幾個項目，不僅一個

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>