如何解决使 react-contexify 上下文菜单呈现在后续位置的顶部:绝对项
所以我设置了一个带有嵌套 react-collapse-pane 的页面。它基本上使用 position: relative
和 absolute
将页面分成这样的块(实际 DOM 有点复杂,因为有子窗格和分隔符的包装器):
<div class="body">
<div class="verticalPane1">
<div class="subPane1"></div>
<div class="divider"></div>
<div class="subPane2"></div>
</div>
<div class="divider"></div>
<div class="verticalPane2">
</div>
</div>
我想为这些窗格中的每一个都有一个自定义上下文菜单。我正在使用图书馆 react-contexify@V4。这个库会在 DOM 的末尾附加一个 position:fixed
上下文菜单,无论 React 组件放置在哪里:
假设我打开 subPane1
的上下文菜单,文档变为:
//Simplified body
<SplitPane direction="vertical">
<SplitPane className="verticalPanel2" direction="horizontal">
<Child className="subPanel1"/>
<Child className="subPanel1"/>
</SplitPane>
<Child className="verticalPanel2"/>
</SplitPane>
//Child component
const Child = (props) => {
...//
return <div className={props.className}>
{showContextMenu && <ContextMenu />}
</div>
//notice that the context menu's here but gets appended to the end of the DOM anyways.
//There are a lot of child-specific logic that I don't want to lift up; and accessing child functions from the parent is anti-pattern
}
//generated html
<div class="body">
<div class="verticalPane1">
<div class="subPane1"></div>
<div class="divider"></div>
<div class="subPane2"></div>
</div>
<div class="divider"></div>
<div class="verticalPane2">
</div>
</div>
<div class="contextMenu"></div> //context menu at the end of the DOM
所以上下文菜单很好地显示在所有内容上。
然而,V4 充满了微妙的错误,所以我尝试了 V5。 V5 修复了我遇到的所有细微错误,但是,库还决定更改为将上下文菜单附加到文档中的字面位置(我认为)。所以上面的例子变成了:
<div class="body">
<div class="verticalPane1">
<div class="subPane1">
<div class="contextMenu" /> //context menu moved to here. but still position: fixed
</div>
<div class="divider"></div>
<div class="subPane2"></div>
</div>
<div class="divider"></div>
<div class="verticalPane2">
</div>
</div>
由于 HTML 堆栈逻辑,subPanel1
(和 2)的上下文菜单呈现在绝对定位的 verticalPane2
下方。 z-index
没有修复它。
我试图避免重写组件并将上下文菜单提升到父级。这将需要进行大量重构。
我会寻找其他上下文菜单库的建议,除非我害怕遇到 react-contexify@V4 中的所有细微错误。 V5 修复了除这一问题之外的所有内容。 react-contextmenu 看起来不错,但目前还没有维护,所以我有我的担忧(反正 react-contexify 的作者并没有对我的 github 问题做出回应 lmao...)
我知道我可能必须分叉 repo 才能将上下文菜单再次附加到 DOM 的末尾,但我真的希望有一种不那么麻烦的方法来保持上下文菜单始终位于顶部。 css 或者一些简单的代码。
解决方法
于是用 React Portals 弄明白了
官方文档提供了一个足够好的例子。所以我刚刚编写了一个新的 Portal
组件并将上下文菜单包装在其中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。