reactjs - 动态填充菜单组件 - React Material UI

Question

我有一张桌子，我想根据用户点击的位置显示一个带有不同选项的上下文菜单。例如，我想在用户单击表格单元格时显示一些选项，当用户单击标题时显示一些其他选项等等。

如果发生某些事件，我还希望能够禁用菜单中的某些选项。我正在使用 redux 来跟踪我的状态。

我想知道的是：我是否应该为每种类型的菜单选项实现一个组件，以便我可以专门为每个选项分配一个功能和启用/禁用状态？我应该直接从 redux 处理选项吗？

到现在为止我想做什么：

选项 1：每个选项列表的不同组件

const CellOptions = () => {
  const isOption1Disabled = useSelector(selectIsOption1Disabled);
  const isOption2Disabled = useSelector(selectIsOption2Disabled);

  const doSomething = () => console.log('hello');
  const doSomethingElse = () => console.log('hello word');
  return (
    <>
      <MenuItem onClick={dosomething} disabled={isOption1Disabled}>option1<MenuItem>
      <MenuItem onClick={doSomethingElse} disabled={isOption2Disabled}>option1<MenuItem>
    </>
  )
}

const HeaderOptions = () => {
  const isOption1Disabled = useSelector(selectIsOption1Disabled);
  const isOption2Disabled = useSelector(selectIsOption2Disabled);

  const doSomething = () => console.log('hello');
  const doSomethingElse = () => console.log('hello word');
  return (
    <>
      <MenuItem onClick={dosomething} disabled={isOption1Disabled}>option1<MenuItem>
      <MenuItem onClick={doSomethingElse} disabled={isOption2Disabled}>option1<MenuItem>
    </>
  )
}

等等。然后，我将根据本地组件状态（用户单击的位置）有条件地渲染每个组件。

选项 2：使用描述当前选项的对象

export const CONTEXT_MENU_ACTIONS: Record<string, Action[][]> = {
  cell: [
    [
      {
        id: 'option1',
        label: 'Option 1',
      },
      {
        id: 'option2',
        label: 'Option2'
      }
    ]
  ],
  header: [
    [
      {
        id: 'option1',
        label: 'Option1',
      }
    ]
  ]
};

然后根据本地状态渲染一个特定的选项。问题在于我不确定如何为每个选项分配一个 onClick 函数。当然，我可以获取所选选项的 id，然后使用 if else 链调用特定函数，但这听起来真的很难看。而且我不确定如何通过选择器分配来自 redux 的禁用状态。

标签： reactjsreduxreact-reduxreact-material