即时创建 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

查看演示 here :

即时创建 React 上下文菜单

Create React context menu on the fly

javascript

contextmenu

reactjs

react-redux

问题

背景

挑战