javascript-快速创建React上下文菜单

题

有没有一种方法可以动态创建React组件(或更具体地说：上下文菜单),即仅当用户请求这样的上下文菜单时？

构造单个上下文菜单所需的所有信息已经在触发它的组件上,这意味着无需等待任何异步数据提取.

在其他情况下,这很容易实现,但是我无法确定如何在React Redux应用程序中做到这一点.

编写此代码时,唯一想到的就是在触发上下文菜单时发送一个动作,并将此单个上下文菜单作为某种弹出对话框包含在最终的重新渲染中.

这样至少可以避免过早创建不可见组件的堆.但这听起来有点像反模式.我在这里想念什么？

背景

我的React应用程序中要显示的状态是一个分层的结构,实际上嵌套了六到七个级别.

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

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

这些项目可以以用户认为合适的任何方式嵌套.

>每个项目应通过上下文菜单提供最多五个动作,具体取决于其在层次结构中的位置(排列可能不超过10个).
>每个NonHierarchicalData还应根据其数据提供一个上下文菜单,该菜单可能包含多达30个菜单项.由于数据包含并入菜单项的用户输入,因此每个上下文菜单可能都是唯一的.

现实状态可能包含大约30或40个这些项,每个项具有5到10个NonHierarchicalData元素.基于这些数字,我可以得出大约ca. 250个不同的上下文菜单,包括5000多个菜单项.
在任何给定时间,用户可能只会在选择一个动作之前触发一个或两个上下文菜单,从而触发状态更改,从而重新渲染.

挑战

一方面,现有的库非常好,例如react-contextmenu,它们希望所有上下文菜单变体都可以预先知道,并且可以作为DOM的一部分创建,仅在需要时才可见.

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

解决方法:

从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道具必须转发其所有道具,或者至少转发与正在构建的菜单有关的部分.例如.

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.

标签：reactjs,react-redux,contextmenu,javascript
来源： https://codeday.me/bug/20191026/1934496.html