Vaadin 14中如何在ContextMenu内添加Anchor组件

问题原因 #

Vaadin 14 的 ContextMenu 组件对直接传入add()方法的子组件有渲染限制：该方法仅支持添加纯静态展示类元素，传入Anchor这类带交互逻辑的组件时，不会被包装为符合菜单规范的DOM结构，因此不会出现在渲染后的菜单项列表里。

正确实现代码 #

不要直接调用add()方法传Anchor实例，改用addItem()方法创建标准菜单项，再把Anchor作为菜单项内容传入：

// 初始化你的Anchor组件
Anchor anchorFile = new Anchor("target/file/path", "打开目标文件");
// 通过addItem注册菜单项，将Anchor作为菜单项内容嵌入
contextMenu.addItem(anchorFile, event -> {
    // 若需要在点击跳转前执行自定义逻辑可写在此处，无额外逻辑可省略该事件参数
});

如果需要屏蔽菜单项默认的点击选中样式，避免和Anchor原生跳转行为冲突，可以加一行样式配置：

MenuItem anchorItem = contextMenu.addItem(anchorFile);
// 移除菜单项默认的点击高亮、选中态样式
anchorItem.getElement().getThemeList().add("tertiary-inline");

避坑提示 #

• 所有需要放在ContextMenu里的可交互组件（按钮、链接、输入框等），都要通过addItem()方法包装后再添加，直接调用add()大概率出现渲染异常
• 如果需要动态修改Anchor的跳转地址，可以给ContextMenu添加打开监听器，在菜单弹出前实时更新Anchor的href属性即可

内容的提问来源于stack exchange，提问作者Lukas