在这里,我已经包含了我的示例代码。如果它是一维数组意味着,我可以轻松地将json数据插入到我的代码中。如何用反应js的多维json数据实现这个?
var Category = React.createClass({
render: function() {
return (
<div>
{this.props.data.map(function(el,i) {
return <div key={i}>
<div>
{el.product}
</div>
<div>
{el.quantity}
</div>
</div>;
})}
</div>
);
}
});
var data = [
{
product:"a",
quantity:28,
sub:[
{
subItem:'a'
},
{
subItem:'b'
}
]
},
{
product:"b",
quantity:20,
sub:[
{
subItem:'a'
},
{
subItem:'b'
}
]
}
];
React.render(<Category data={data}/>, document.body);
答案 0 :(得分:2)
您可以为子类别创建组件,
var SubCategory = React.createClass({
render: function () {
var list = this.props.data.map(function(el, i) {
return <li key={i}>{ el.subItem }</li>;
});
return <ul>{ list }</ul>;
}
});
并在Category
组件
{this.props.data.map(function(el,i) {
return <div key={i}>
<div>{el.product}</div>
<div>{el.quantity}</div>
<SubCategory data={ el.sub } />
</div>;
})}