即时创建 React 上下文菜单

Question

问题

有没有办法即时创建 React 组件（或更具体地说：上下文菜单），即仅当用户请求这样的上下文菜单时？

构建单个上下文菜单所需的所有信息已经存在于触发它的组件上，这意味着无需等待任何异步数据获取。

在其他情况下，这可以很容易地实现，但我无法理解在 React+Redux 应用程序中应该如何完成。

---

写这篇文章时唯一想到的就是在触发上下文菜单时发送一个动作，并将这个单个上下文菜单作为某种弹出对话框包含在生成的重新渲染中。

这至少可以避免过早地创建大量不可见的组件。但不知何故，它感觉像是一种反模式。我在这里错过了什么？

---

背景

在我的 React 应用程序中显示的状态是一个分层结构，实际上嵌套了六到七层。

顶层是一个简单的列表。但是每个列表项都有这样的结构：

Item = {
    priorChildren: List<Item>
    content: List<NonHierarchicalData>
    laterChildren: List<Item>
}

这些

Item

可以以用户认为合适的任何方式嵌套。

• 每个

  Item

  应根据其在层次结构中的位置通过上下文菜单提供最多五个操作（可能不超过10个排列）。
• 每个

  NonHierarchicalData

  还应该根据其数据提供一个上下文菜单，最多可能有 30 个菜单项。由于数据包含合并到菜单项中的用户输入，因此每个上下文菜单都可能是唯一的。

现实状态可能包含大约 30 或 40 个这样的

Item

，每个有 5 到 10 个

NonHierarchicalData

元素。根据这些数字，我可以得出 ca。 250 个不同的上下文菜单，包含 5000 多个菜单项。 在任何给定时间，用户可能只会打开一个或两个上下文菜单，然后才会选择一个操作，从而触发状态更改，从而重新呈现。

挑战

一方面，有很棒的现有库，如 react-contextmenu，它希望所有上下文菜单变体都预先知道，并作为 DOM 的一部分创建，仅在需要时才可见。

另一方面，在下一次状态更改后不可避免地重新创建菜单之前，创建数百个具有数千个条目的菜单只是为了显示其中的几十个，这感觉违反直觉。

Answer 1

从它的版本

v2.3.1

开始，react-contextmenu 提供了一个

connectMenu()

帮助程序，能够将触发器的道具向下传递到单个已注册的菜单，以改变其渲染。 然而，这可能会在未来被重构，所以在新版本中谨慎使用。

---

简而言之：您可以为

ContextMenu

提供一个包装器组件，并使其能够通过上述

connectMenu()

助手接收触发道具。

const MENU_ID = 'some-identifier';
const DynamicMenu = (props) => {
  const { id, trigger } = props;
  return (
    <ContextMenu id={id}>
      {trigger && <MenuItem>{trigger.itemLabel}</MenuItem>}
    </ContextMenu>
  );
};
const ConnectedMenu = connectMenu(MENU_ID)(DynamicMenu);

ContextMenu

（此处为

ConnectedMenu

）的连接包装器只需在某些父组件中包含一次，而多个触发器可以将其用于具有不同内容的菜单。请注意，

ContextMenuTrigger

的

connect

属性必须转发其所有

props

或至少转发与正在构建的菜单相关的部分。例如

const DynamicMenuExample = (props) => (
  <div>
    <ContextMenuTrigger id={MENU_ID} itemLabel='one'
        connect={props => props}>
      {'Click me for a menu with a "one" item.'}
    </ContextMenuTrigger>
    <ContextMenuTrigger id={MENU_ID}
        connect={() => ({itemLabel: 'other'})}>
      {'Click me for a menu with an "other" item.'}
    </ContextMenuTrigger>
    <ContextMenuTrigger id={MENU_ID} itemLabel='third'
        connect={props => ({ itemLabel: props.itemLabel})}>
      {'Click me for a menu with a "third" item.'}
    </ContextMenuTrigger>
    <ConnectedMenu />
  </div>
);

---

参考项目的DynamicMenu demo一个完整的例子。

Answer 2

这里是处理可继承菜单的替代方案；

这个库允许子组件中的菜单也可以在他们的上下文中显示父菜单，可以选择基于浏览器事件和父菜单。

https://github.com/n8tz/react-inheritable-context-menu

在这里查看演示：

Answer 3

聚会有点晚了，但看看我在Mantine ContextMenu中的表现：

.

回购网址：https://github.com/icflorescu/mantine-contextmenu