如何传递外部处理函数，实现菜单组件的灵活复用？

现有一个返回菜单项的方法（原本放在包含createTask()和showTasks()处理函数的组件里），代码如下：

getAdminMenuItems() {
    return [
      {
        label: 'Задачи',
        items: [
          {
            label: 'Создать задачу',
            command: () => this.createTask(),
          },
          { label: 'Список задач', command: () => this.showTasks() },
        ],
      }];
}

当前组件通过this.menuItems = this.headerService.getMenuItems();调用该菜单，现在需要在不同组件复用这个菜单时，把内部的createTask()和showTasks()换成外部传入的处理函数。

解决方案1：传入回调配置对象 #

直接修改getAdminMenuItems方法，让它接收一个包含自定义回调的对象，还能保留原函数作为默认值（方便原组件继续使用）：

// 修改后的服务方法
getAdminMenuItems(callbacks?: { createTask?: () => void; showTasks?: () => void }) {
  // 优先用传入的回调，没传就用原组件的方法（注意绑定this）
  const { 
    createTask = this.createTask.bind(this), 
    showTasks = this.showTasks.bind(this) 
  } = callbacks || {};
  
  return [
    {
      label: 'Задачи',
      items: [
        {
          label: 'Создать задачу',
          command: () => createTask(),
        },
        { label: 'Список задач', command: () => showTasks() },
      ],
    }];
}

其他组件调用时，传入自己的处理函数：

// 目标组件内的调用代码
this.menuItems = this.headerService.getAdminMenuItems({
  createTask: () => this.customCreateTask(),
  showTasks: () => this.customShowTasks()
});

解决方案2：直接传入单个回调参数 #

如果菜单的选项固定不变，也可以给方法直接传两个回调参数，逻辑更简单：

// 修改后的服务方法
getAdminMenuItems(createTaskHandler: () => void, showTasksHandler: () => void) {
  return [
    {
      label: 'Задачи',
      items: [
        {
          label: 'Создать задачу',
          command: createTaskHandler,
        },
        { label: 'Список задач', command: showTasksHandler },
      ],
    }];
}

调用示例：

this.menuItems = this.headerService.getAdminMenuItems(
  () => this.myCreateLogic(),
  () => this.myShowLogic()
);

解决方案3：改成纯无状态生成函数 #

要是不想让服务依赖原组件的方法，就把菜单生成逻辑做成纯函数，完全由外部传入所有回调：

// 重构后的服务方法
getAdminMenuItems(createTask: () => void, showTasks: () => void) {
  return [
    {
      label: 'Задачи',
      items: [
        { label: 'Создать задачу', command: createTask },
        { label: 'Список задач', command: showTasks },
      ],
    }];
}

这种方式下所有组件都必须传入自己的处理逻辑，彻底解除对原组件的依赖，复用性更强。

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