React中动态生成TABS数组的写法是否正确？

错误点说明： #

• 你把整个values/labels数组用{values}的形式赋值给单个对象的value和label，这会让value变成一个包含数组的对象（比如{values: ["Names", "Logs", ...]}），和原代码中每个标签对应单个字符串的结构完全不符。
• 最终生成的TABS是只有一个元素的数组，但原代码是四个独立的标签对象，结构完全不一致。

正确的动态写法 #

如果你的value和label内容完全一致，可以直接遍历单个数组生成TABS：

const tabItems = ["Names","Logs","Groups","Subscriptions"];
const TABS = tabItems.map(item => ({
    value: item,
    label: item,
    onclick: (obj) => {
        tabOnClick(obj.value);
    },
    selected: mainTabSelected,
}));

如果之后value和label可能需要区分（比如标签显示文字和实际值不同），可以用两个数组对应遍历：

const values = ["Names","Logs","Groups","Subscriptions"];
const labels = ["Names","Logs","Groups","Subscriptions"];
const TABS = values.map((value, index) => ({
    value: value,
    label: labels[index],
    onclick: (obj) => {
        tabOnClick(obj.value);
    },
    selected: mainTabSelected,
}));

这两种写法都会生成和你原代码结构完全一致的TABS数组，每个元素对应一个独立的标签配置。

内容的提问来源于stack exchange，提问作者Konstantinos