"使用React实现动态变量"

Question

我在React中有以下代码：

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

我试图将代码变为动态的，如下所示：

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

我是对的吗？

Answer 1

使用：

const values = ["Names", "Logs", "Groups", "Subscriptions"];

const TABS = values.map((e, i) =>
    {
        return {
            value: e,
            label: e,
            onclick: (obj) => {
                tabOnClick(obj.value);
            },
            selected: mainTabSelected,
        }
    }
)

这将在您的values数组上映射每个元素，并为每个选项卡在Tabs数组中注入新对象。