如何根据变量或参数执行Javascript回调

Question

我有一个从 Laravel 后端传递到 React 的数组，代表数据库中的列。我迭代这个数组来构造表格的标题。

对于每一列，我想运行一个回调函数来变异或转换每列的相应数据（每行）。

例如，布尔值将被转换，因此“是”或“否”代表 1 或 0（TinyInt）。这是我到目前为止所拥有的。

const callbacks = {
    name: function(name) {
        console.log(name);
    },
    completed: function(name) {
        console.log(name);
    },
    created_at: function(name) {
        console.log(name);
    },
    updated_at: function(name) {
        console.log(name);
    },
};

构建表格每一行的 React 组件如下。

export default function Row({ can, buttons, row }) {
    
    

    return (
        <>
            {
                Object.keys(row).map((k, i) => {
                    if(k !== "id") { 
                        return ( <td key={ i } className="whitespace-nowrap p-4">{ row[k] }</td> )
                    }
                })
            }
            { buttons(can, row.id) }
        </>
    );
}

输出 { row[k] } 的位置是我需要根据变量 k 中找到的可用回调函数和列名称来转换数据的位置。

任何人都可以帮我解决这个问题吗？可能有一种简单的方法可以动态地执行此操作，但我不知道足够的 JavaScript 来弄清楚它。

我尝试使用数组将列名称“映射”到回调函数，但我无法让它工作。

我还可能需要将列名关联到不同的回调函数，例如为多个列名命名为 active 的回调函数，即完成、禁止、has_uploaded 等 - 任何也可以是布尔值的东西。

Answer 1

动态回调执行：您确定map函数内部是否存在列名k的回调。如果是这样，您可以使用行数据 row[k] 来调用该方法。否则，您只需返回初始值即可。

常规布尔处理：通过根据需要修改回调对象，您可以将相同的回调用于活动状态以及其他布尔属性，例如完成、禁止和 has_uploaded。

返回转换后的值：每个转换后的值保存在transformedValue中后都会显示在表格单元格中。