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

Question

我有一个简单的 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 只能使用一次吗？或者有没有办法根据数组长度重用组件？还是我完全误解了？

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