我有一个简单的 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')
);
关于javascript - 根据数组长度重复 ReactDOM.render,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46046549/