如何构建可绑定对应点击事件的通用列表式菜单组件？

你可以通过以下两种常用方案实现菜单项和执行函数的关联，不需要将函数写入options配置：

方案1：ID映射函数方案 #

为每个选项增加唯一标识，外部传入ID与函数的映射对象，组件内部自动匹配关联。

步骤1：调整options结构，增加唯一ID字段 #

const options = [
  {
    id: 'option1', // 唯一标识，用于匹配函数
    text: 'Option 1',
  },
  {
    id: 'option2',
    text: 'Option 2',
  },
  {
    id: 'option3',
    text: 'Option 3',
  },
];

步骤2：外部使用组件时传入函数映射对象 #

// 各选项对应的执行函数
const handleOption1 = () => console.log('触发选项1逻辑');
const handleOption2 = () => console.log('触发选项2逻辑');
const handleOption3 = () => console.log('触发选项3逻辑');

// 调用组件
<Menu 
  options={options}
  actionMap={{
    option1: handleOption1,
    option2: handleOption2,
    option3: handleOption3
  }}
/>

步骤3：改造组件内部实现 #

// Menu组件
const Menu = ({ options, actionMap }) => {
  return (
    <div>
      {options.map((option, index) => (
        <MenuOption 
          text={option.text} 
          index={index}
          onClick={actionMap?.[option.id]} // 匹配对应函数
          key={option.id}
        />
      ))}
    </div>
  );
};

// MenuOption组件
const MenuOption = ({ text, index, onClick }) => {
  return (
    <div onClick={onClick}>
      <p>{text}</p>
    </div>
  );
};

方案2：统一回调透传方案 #

组件仅对外暴露统一的点击回调，将当前点击的选项信息透传出去，由外部自行判断执行对应逻辑，灵活性更高。

步骤1：外部使用组件时传入统一回调 #

const handleOptionClick = (option, index) => {
  // 外部根据选项信息匹配对应逻辑
  switch(option.id) {
    case 'option1':
      console.log('触发选项1逻辑');
      break;
    case 'option2':
      console.log('触发选项2逻辑');
      break;
    case 'option3':
      console.log('触发选项3逻辑');
      break;
  }
}

// 调用组件
<Menu options={options} onOptionClick={handleOptionClick} />

步骤2：改造组件内部实现 #

// Menu组件
const Menu = ({ options, onOptionClick }) => {
  return (
    <div>
      {options.map((option, index) => (
        <MenuOption 
          text={option.text} 
          index={index}
          onClick={() => onOptionClick?.(option, index)} // 透传选项信息
          key={option.id ?? index}
        />
      ))}
    </div>
  );
};

// MenuOption组件实现和方案1完全一致

方案选型建议 #

• 若各选项逻辑独立、差异大，优先选择方案1，映射关系清晰易维护
• 若选项逻辑有共性、需要统一做权限校验/埋点等前置处理，优先选择方案2，代码更简洁

注意：优先给每个option配置唯一固定的id作为匹配标识，避免使用index、text作为匹配依据，防止选项顺序调整、文案修改时逻辑出现异常。

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