javascript - 根据数组长度重复ReactDOM.render

我有一个简单的React应用，其中包含在React中创建的容器中显示的数据数组：

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

我遇到的问题是，我希望“ ContainerName” div（或Status var）根据数组中的项目数进行渲染（4次，但目前仅渲染一次）。

我试过了，但是没有用：

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

ReactDom只能使用一次吗？还是有一种方法可以根据数组长度重用组件？还是我完全误会了？

最佳答案

渲染函数必须返回带有任意数量的子代的单个根元素。这将工作：

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