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

render函数必须返回包含任意数量子节点的单个根元素。这可行：

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

基于数组长度重复ReactDOM.render

1 个答案: