javascript - 即时创建 React 上下文菜单

Question

问题

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

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

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

---

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

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

---

背景

要在我的 React 应用程序中显示的状态采用分层结构，实际嵌套深度可达六到七层。

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

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

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

• 每个Item应根据其在层次结构中的位置，通过上下文菜单提供最多五个操作(可能不超过 10 个排列)。
• 每个NonHierarchicalData还应该根据其数据提供一个上下文菜单，最多可能有 30 个菜单项。由于数据包含合并到菜单项中的用户输入，因此每个上下文菜单都可能是唯一的。

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

挑战

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

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

Answer 1

从其版本 v2.3.1 开始，react-contextmenu提供了一个 connectMenu() 助手，能够将触发器的 Prop 向下传递到单个已注册的菜单，以改变其呈现。然而，这可能会在未来被重构，所以在新版本中谨慎使用。

---

简而言之:您可以为 ContextMenu 提供一个包装器组件，并使其能够通过上述 connectMenu() 帮助程序接收触发 Prop 。

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一个完整的例子。