"使用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數組中註入新物件。