在ReactJS中实现更“全面”的上下文菜单

Question

我试图弄清楚我在ReactJS中实现上下文菜单的方式是“反应”的方式（或者是更高级的方式）还是我错了。

我有一个类似于“ Windows文件浏览器”的页面（非常大的Web应用程序的一部分） 三个主要领域： -左窗格：文件夹树 -右窗格：文件夹网格及其下的文件列表 从TreeView到File / Folder，一切都是组件。

每个“叶子”组件（树上的项目，文件列表中的文件以及“文件夹网格”中的文件夹）都需要一个“上下文菜单”，该菜单由省略号按钮（而不是右键单击）打开。

我们的FE堆栈是ReactJS，Redux和Saga

我知道简单的方法是将ContextMenu（也许是通用的）组件赋予其渲染中的每个组件-但我想知道ReactJS系统设计的“整体”方法是什么。

由于页面上有许多需要Context Menu的对象，因此我想到在应用程序中使用包装器组件，组件可以从中请求淹没ContextMenu可能是一个更好的解决方案。 该请求将是一个JSON对象，带有一个“上下文动作”数组-每个动作都有一个名称，图标和要调用的函数。

提供具有所谓的请求上下文菜单功能的组件可以通过redux或简单地将组件树下推到一个方法来完成（嗯-最好不是）

所以-在ReactJS中实现一个声明性的，系统范围的上下文菜单“服务”-一个合理的体系结构决定，或者我是个不好的React程序员:)吗？

Answer 1

是的，这是完全合理的事情。实际上，我的帖子Practical Redux, Part 10: Managing Modals and Context Menus几乎演示了这种确切的方法。一个很大的不同是，为了与Redux的“所有动作都应该可序列化”的原则保持一致，我没有在动作对象中包括回调函数。相反，我提供了一个“结果操作”对象，对话框可以填充该对象。如果您确实要在操作中包含回调函数，则可能会导致时间旅行调试工作错误地将其视为惯用的Redux用法。