Question

我正在学习JS和TypeScript，我需要为每个项目生成一个单独的React组件：

说我有这个对象

var regions = {
    NA: ["US", "ABC1"],
    EU: ["GB", "LX", "IT"],
    FE: ["JP", "DEF1"],
    CN: ["CN"]
}

我试图循环并返回每个密钥（NA / EU / FE / CN）的组件以及阵列中的每个项目（US，ABC1等）

我可以在for循环中打印出我想要的值：

for (let key in region) {
    for (let item in region[key]) {
        console.log("key: " + key + " item " + region[key][item]);
    }
}

作为一个健全性测试，但我没有这样做，而是希望将每个项目映射到一个Component，以便从函数中返回一个完整的Components列表。任何推荐的方法吗？

Answer 1

当你说＆＃34;返回一个组件＆＃34;时，有点不清楚你正在寻找什么，但是我会按照我认为你说的去做。要适合您的循环代码，您可以执行以下操作：

const regionComponents = [];
for (let key in regions) {
    for (let item in regions[key]) {
        regionComponents.push(<MyComponent region={regions[key][item]} />);
    }
}

return regionComponents;

或者如果你想稍微缩短一下：

return regions.map(region => region.map(subRegion => <MyComponent region={subRegion} />));

（显然会返回一个带有组件的2D数组，但是如果你只是把它放在JSX的其他地方来渲染React将为你处理去嵌套）。

如果这不是您要找的内容，请发表评论/编辑您的帖子以便更清楚一点，我会尽力更新我的答案。

Answer 2

我不完全确定这是你想要做的，但是你可以使用像lodash的idx.length()函数来迭代你的对象，然后将每个数组的每个项目变成一个新的组件

以下是一个示例：https://codesandbox.io/s/ll5n988mwm

使用数组的此对象的地图？

2 个答案: