如何基于变量或参数执行JavaScript回调函数（React场景）

从Laravel后端传数据库列数组到React用来做表格表头，需要针对不同列调用对应的回调函数转换每行数据——比如把数据库里TinyInt类型的1/0转成"Yes"/"No"。现有回调定义和Row组件代码，要实现根据列名调用对应回调，还得让多个布尔列能复用同一个回调。

原回调代码：

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);
    },
};

原Row组件代码：

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) }
        </>
    );
}

1. 抽离通用回调，支持复用 #

先把布尔转换这种通用逻辑单独写成一个函数，然后在回调配置里让需要的列直接复用它，其他列保留自定义处理：

// 通用布尔值转换函数
const formatBoolean = (value) => {
  return value ? 'Yes' : 'No';
};

const callbacks = {
    name: (val) => val, // 不需要处理就直接返回原数据
    completed: formatBoolean, // 复用布尔转换
    is_active: formatBoolean, // 其他布尔列也用这个
    created_at: (date) => new Date(date).toLocaleDateString(), // 日期格式化示例
    updated_at: (date) => new Date(date).toLocaleString(),
};

2. 修改Row组件，动态调用回调 #

在渲染单元格的地方，先判断当前列有没有对应的回调，有就调用转换数据，没有就直接用原数据：

export default function Row({ can, buttons, row }) {
    return (
        <>
            {
                Object.keys(row).map((k, i) => {
                    if(k !== "id") { 
                        // 拿到当前列的转换函数，默认返回原数据
                        const formatFn = callbacks[k] || (val => val);
                        const formattedValue = formatFn(row[k]);
                        return ( 
                            <td key={ i } className="whitespace-nowrap p-4">
                                { formattedValue }
                            </td> 
                        )
                    }
                })
            }
            { buttons(can, row.id) }
        </>
    );
}

3. 可选：配合后端列数组更精准控制 #

如果后端传来的列数组和row的key不完全对应，或者只想渲染指定列，可以把后端的列数组作为props传给Row组件，遍历列数组而不是Object.keys(row)：

// 假设props里有columns，是后端传来的列名数组比如['name', 'completed', 'created_at']
export default function Row({ can, buttons, row, columns }) {
    return (
        <>
            {
                columns.map((k, i) => {
                    const formatFn = callbacks[k] || (val => val);
                    const formattedValue = formatFn(row[k]);
                    return ( 
                        <td key={ i } className="whitespace-nowrap p-4">
                            { formattedValue }
                        </td> 
                    )
                })
            }
            { buttons(can, row.id) }
        </>
    );
}

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