重複基於陣列長度ReactDOM.render

Question

我有一個簡單的應用程序作出反應，包含在內創建容器顯示的數據的陣列陣營：

var products = [ 
{ name: 'product 1'}, 
{ name: 'product 2' }, 
{ name: 'product 3' }, 
{ name: 'product 4' } 
]; 

var Status = React.createClass({ 

render: function() { 

    var listItems = this.props.items.map(function (item) { 
     return (
      <h2 key={item.name}> 
       {item.name} 
      </h2> 
     ); 
    }); 
    return (   
     <div className="ContainerName"> 
     {listItems}            
     </div>  
    ); 
} 
}); 

ReactDOM.render(<Status items={products} />, 
document.getElementById('statusContainer')); 

我的問題是，我想要的「容器名稱」 div（或Status var）根據數組中項目的數量進行渲染（4次，但目前只渲染一次）。

我試過，但它不工作：

ReactDOM.render(<Status items={products} />, 
document.getElementById('statusContainer'), products.length); 

是ReactDom只是爲了使用一次？或者有沒有一種方法可以根據數組長度重用組件？還是我完全誤解？

Answer 1

渲染函數必須返回任意數量的子元素的單個根元素。這將工作：

var products = [ 
    { name: 'product 1'}, 
    { name: 'product 2' }, 
    { name: 'product 3' }, 
    { name: 'product 4' } 
]; 

var Status = React.createClass({ 
    render: function() { 
    var listItems = this.props.items.map(item => { 
     return (
     <div className="ContainerName" key={item.name}> 
      <h2>{item.name}</h2> 
     </div> 
     ); 
    }); 

    return <div className="statusComponentRoot">{listItems}</div>; 
    } 
}); 

ReactDOM.render(
    <Status items={products} />, 
    document.getElementById('statusContainer') 
);