映射时嵌套数据表

Question

基本上我有两个 tables products 和 categories。我设法绘制出 products 与：

var ProductsList = React.createClass({
render: function () {
    var EachProduct = this.props.data.map(function (item) {
        return (
                <SingleProduct key={item.Id } data={item}/>
        );
    });
    return (
        <ul>
            {EachProduct}
        </ul>
        );
}

});

...还有第二个 table categories。我试过谷歌搜索，但我真的不知道如何 google 它。通常我可以只发送两个模型以从控制器查看并且可以只在 foreach 中执行 foreach 而第二个只会查看 categories for fk_product_id 或类似的东西，这样 <SingleProduct/> class 可以显示与映射产品相关的所有类别..但这只是一个不同的故事。

怎么做？

Answer 1

也许这样的事情会有所帮助：

render: function () {
var EachProduct = this.props.data.map(function (item) {
    var category = this.props.categories.find((categoryItem)=>{
         return (item.categoryId === categoryItem.id)
    })
    return (
            <SingleProduct key={item.Id } data={item} category={category}/>
    );
});
return (
    <ul>
        {EachProduct}
    </ul>
    );

}

映射时嵌套数据表

Nested datatable while mapping

javascript

mapping

model-view-controller

reactjs

reactjs.net