如何高效实现基于网格选中单元格的动作配置逻辑？

我有一个支持用户多选的网格，会根据用户选中的单元格在页面底部展示不同动作。当前实现代码如下：

const allActionsToShow = {
    action1: false,
    action2: false,
    action3: false,
    action4: false
};

selectedCells.map(cell => {
    if (cell.id === 'cell1') { 
        allActionsToShow.action1 = true;
        allActionsToShow.action2 = true;
        hideRemainingActions(['action3', 'action4']);
    }
    if (cell.id === 'cell3') {
        allActionsToShow.action3 = true;
        hideRemainingActions(['action1', 'action2', 'action4'])
    }
    if (cell.id === 'cell4') {
        allActionsToShow.action4 = true;
        hideRemainingActions(['action1', 'action2', 'action3'])
    }
});

const hideRemainingActions = (actionsToHide: string[]) => {
    actionsToHide.map(actionId => {
        allActionsToShow[actionId] = false;
    });
};

当前方式在动作数量较多（如50个）时，需手动设置状态并指定隐藏动作，难以扩展。请问是否有更高效的实现方式？

核心思路是建立单元格与对应展示动作的映射关系，避免硬编码判断和手动维护隐藏动作，大幅提升扩展性：

1. 定义单元格-动作映射表，清晰记录每个单元格选中时需要展示的动作
2. 先初始化所有动作为隐藏状态
3. 遍历选中单元格，根据映射表批量设置对应动作为展示状态

具体实现代码 #

// 1. 定义单元格与动作的映射表，新增单元格/动作只需添加条目
const cellActionMap: Record<string, string[]> = {
    cell1: ['action1', 'action2'],
    cell3: ['action3'],
    cell4: ['action4'],
    // 示例扩展：cell5: ['action5', 'action6']
};

// 2. 初始化所有动作为隐藏状态，动作列表可从配置/枚举获取
const allActions = ['action1', 'action2', 'action3', 'action4'];
const allActionsToShow = Object.fromEntries(
    allActions.map(action => [action, false])
) as Record<string, boolean>;

// 3. 遍历选中单元格，批量更新动作显示状态
selectedCells.forEach(cell => {
    const actionsToShow = cellActionMap[cell.id] || [];
    actionsToShow.forEach(action => {
        allActionsToShow[action] = true;
    });
});

进阶优化 #

如果动作和映射关系需要动态调整，可以把配置抽离成单独文件或从后端接口获取，彻底摆脱硬编码：

// 从外部配置导入，无需修改业务代码
import { cellActionMap, allActions } from './actionConfig';

const allActionsToShow = Object.fromEntries(
    allActions.map(action => [action, false])
) as Record<string, boolean>;

selectedCells.forEach(cell => {
    const actionsToShow = cellActionMap[cell.id] || [];
    actionsToShow.forEach(action => {
        allActionsToShow[action] = true;
    });
});

关键优势 #

• 扩展性强：新增单元格或动作仅需修改映射表/动作列表，无需改动业务逻辑
• 代码简洁：消除大量if判断和手动状态设置
• 可维护性高：映射表结构清晰，直观展示单元格与动作的关联关系

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