时间戳

首页 > 解决方案 > React JS - 将来自对象和数组的信息作为道具传递给子组件

javascript - React JS - 将来自对象和数组的信息作为道具传递给子组件

问题描述

我有一个看起来像这样的对象：

storeObjects = {
    furnitures: [{name: 'table', price: 50}, {name: 'chair', price: 20}],
    electronics: [{name: 'tv', price: 150}]
}

我还有一系列颜色：

['brown', 'yellow', 'green', 'red']

现在我想通过这个对象和数组进行映射，以创建带有这些信息作为道具的子组件。我想得到这样的东西：

<ChildComponent name = 'table' price = 50 color = 'brown' />
<ChildComponent name = 'chair' price = 20 color = 'brown' />
<ChildComponent name = 'tv' price = 150 color = 'yellow' />

我的观点是来自第一个键的元素将获得第一种颜色，来自第二个键的元素将获得第二种颜色，依此类推

标签： javascriptarraysreactjsobject

解决方案

let colors = ['brown', 'yellow', 'green', 'red']
Object.keys(storeObjects).map((key, index) => {
    storeObjects[key].map((obj) => {
        console.log(obj.name, obj.price, colors[index])
    })
})

推荐阅读