javascript - 如何创建 Konva-React 上下文菜单

Question

据我所知，Konva 没有一种简单/内置的方法来创建用于右键单击对象的上下文菜单。我正忙于一个需要使用上下文菜单的项目，所以我想我应该创建自己的菜单。

不用说我对 Konva 还很陌生，所以我希望 SO 上的人可能有更多经验来帮助我克服最后的障碍。

我创建了一个沙箱，位于HERE

要求是:

1. 对象应该是可拖动的。 (我从 Konva 沙盒中复制了一个工作示例。)
2. 右键单击对象时应显示上下文菜单。
3. 上下文菜单应该是动态的，因此允许多个项目，每个项目在被点击时执行自己的回调。
4. 做出选择后，应关闭上下文菜单。

到目前为止，我已经做对了大部分，但我正在努力解决的问题是:

1. 我不知道如何将鼠标悬停在一个上下文菜单项上，使其突出显示，然后移动到下一个应该突出显示的项，并将旧的恢复到原始设置。
2. 移出上下文菜单会重新绘制整个对象。我不明白为什么。
3. 点击一项会触发两项的回调。为什么？我定位了被点击的特定菜单项，但同时获得了这两个？
4. 这一点与其说是一个错误，不如说是我不确定如何继续:如果用户在对象上多次右键单击，我将如何防止创建多个上下文菜单？从概念上讲，我知道我可以使用上下文菜单的名称在层(？)中搜索任何项目并将其关闭，但是我不知道如何执行此操作。

如果有任何帮助，我将不胜感激。提前致谢。

Answer 1

不确定我是否迟到了，但我会使用 React Portals ，在 react-konva 页面上有一个关于它的例子:https://konvajs.github.io/docs/react/DOM_Portal.html

我 fork 了你的沙盒如何完成:https://codesandbox.io/s/km0n1x8367