Wiederholen von ReactDOM.render basierend auf Feldlänge

Question

Ich habe eine einfache React-Anwendung, die in einem Behälter innerhalb Reagieren erstellt angezeigt ein Array von Daten enthält:

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')); 

Das Problem, das ich habe ist, dass ich den „Containernamen“ will div (oder Status var) zum Rendern entsprechend der Anzahl der Elemente im Array (4 Mal, aber derzeit wird nur einmal gerendert).

Ich habe versucht, aber es funktioniert nicht:

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

Ist ReactDom nur einmal werden soll verwendet? Oder gibt es da einen Weg, wie ich die Komponente entsprechend der Array-Länge wiederverwenden kann? Oder bin ich völlig falsch verstanden?

Answer 1

Die Renderfunktion muss ein einzelnes Wurzelelement mit einer beliebigen Anzahl von untergeordneten Elementen zurückgeben. Das würde funktionieren:

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') 
);