本文旨在解决 Vaadin 项目中，使用 `@Tag` 注解自定义的组件未能正确添加到 MainView 布局的问题。通过分析问题的根源，即组件的 HTML 元素缺少唯一的 ID，导致 J*aScript 代码错误地将组件渲染到页面上的其他位置。本文将提供一种解决方案，通过为组件生成唯一的 ID，并更新 J*aScript 代码以使用该 ID，从而确保组件能够正确地渲染到 Vaadin 布局中。

在 Vaadin 项目中，使用 @Tag 注解创建自定义组件时，可能会遇到组件无法正确添加到 MainView 布局中的问题。表现为组件渲染在布局之外，或者布局中只包含一个空的组件标签。这通常是由于 J*aScript 代码中的元素选择器错误地选择了页面上的其他元素，而不是自定义组件对应的元素。

问题分析

问题的核心在于，自定义组件的根 HTML 元素缺少一个唯一的 ID。当 J*aScript 代码使用 document.getElementById("outlet") 等方法来查找组件的容器时，如果页面上存在其他具有相同 ID 的元素，J*aScript 代码可能会错误地选择这些元素。

解决方案

解决此问题的关键是为自定义组件的根 HTML 元素生成一个唯一的 ID，并更新 J*aScript 代码以使用该 ID 来查找组件的容器。以下是具体的步骤：

1. 修改 J*a 组件代码

   首先，需要修改 J*a 组件代码，使其能够生成并设置唯一的 ID。可以使用 Composite 类来创建一个包含 Div 元素的组件，并为该 Div 元素设置一个随机生成的 ID。

   ChatCut

   AI视频剪辑工具

   1086 查看详情

   import com.vaadin.flow.component.Composite;
   import com.vaadin.flow.component.Tag;
   import com.vaadin.flow.component.dependency.JsModule;
   import com.vaadin.flow.component.dependency.NpmPackage;
   import com.vaadin.flow.component.html.Div;
   import com.fasterxml.jackson.core.JsonProcessingException;
   import com.fasterxml.jackson.databind.ObjectMapper;
   import com.fasterxml.jackson.databind.ObjectWriter;
   
   import j*a.util.List;
   import j*a.util.Random;
   
   @JsModule("./visjs-test.js")
   @NpmPackage(value = "vis", version = "0.110.0")
   @Tag("div")
   public class VisJs extends Composite<Div> {
   
       private static final Random rand = new Random();
   
       public VisJs(List<VisJsEdge> edges, List<VisJsNode> nodes) throws JsonProcessingException {
           String id = randomId(10);
           setId(id);
   
           ObjectWriter owForEdges = new ObjectMapper().writer().withDefaultPrettyPrinter();
           ObjectWriter owForNodes = new ObjectMapper().writer().withDefaultPrettyPrinter();
   
           String jsonEdges = owForEdges.writeValueAsString(edges);
           String jsonNodes = owForNodes.writeValueAsString(nodes);
   
           getElement().executeJs("window.initThree($0, $1, $2, $3)", this, jsonEdges, jsonNodes, id);
       }
   
       private String randomId(int chars) {
           int limit = (int) (Math.pow(10, chars) - 1);
           String key = String.format("%0" + chars + "d", rand.nextInt(limit));
           return "vis-" + key;
       }
   
       @Override
       protected Div initContent() {
           Div content = new Div();
           content.setId(getId().orElse(null)); // Ensure ID is set on the Div
           return content;
       }
   
       public void setId(String id) {
           getContent().setId(id);
       }
   
       public String getId() {
           return getContent().getId().orElse(null);
       }
   }

   在这个示例中，VisJs 类继承了 Composite

   ，这意味着它将包含一个 Div 元素作为其内容。在构造函数中，我们生成了一个随机的 ID，并将其设置为 Div 元素的 ID。initContent方法用于初始化组件的内容，确保ID被正确设置。setId 和 getId 方法用于设置和获取组件的 ID。

2. 修改 J*aScript 代码

   接下来，需要修改 J*aScript 代码，使其能够接收组件的 ID，并使用该 ID 来查找组件的容器。

   import {DataSet, Network} from "vis";
   
   class VisJsTest {
       init(element, edges, nodes, id) {
           this.element = element;
           this.container = document.getElementById(id); // Use the passed ID
   
           var loadedNodes = JSON.parse(nodes);
   
           var _this = this;
           var step;
           for (step = 0; step < loadedNodes.length; step++) {
               loadedNodes[step] = this.fillNode(loadedNodes[step]);
           }
           this.nodes = new DataSet(loadedNodes);
   
           var loadedEdges = JSON.parse(edges);
           for (step = 0; step < loadedEdges.length; step++) {
               loadedEdges[step] = this.fillEdge(loadedEdges[step]);
           }
           this.edges = new DataSet(loadedEdges);
   
           this.data = {
               nodes: this.nodes,
               edges: this.edges,
           };
           var options = {};
           this.network = new Network(this.container, this.data, options);
       }
   }
   
   window.initThree = function(element, edges, nodes, id) {
       new VisJsTest().init(element, edges, nodes, id);
   }

   在这个示例中，init 函数现在接收一个 id 参数，并使用 document.getElementById(id) 来查找组件的容器。

注意事项

• 唯一 ID： 确保为每个组件实例生成唯一的 ID。如果多个组件实例使用相同的 ID，可能会导致渲染问题。
• ID 传递： 确保将生成的 ID 正确地传递给 J*aScript 代码。在 Vaadin 中，可以使用 getElement().executeJs() 方法将数据传递给 J*aScript 代码。
• 组件生命周期： 考虑组件的生命周期。如果组件在运行时被动态创建或销毁，可能需要相应地更新 ID。

总结

通过为 Vaadin 自定义组件生成唯一的 ID，并更新 J*aScript 代码以使用该 ID 来查找组件的容器，可以解决组件无法正确添加到 MainView 布局中的问题。这种方法确保了 J*aScript 代码能够正确地选择组件对应的 HTML 元素，从而保证组件能够正确地渲染到 Vaadin 布局中。

以上就是解决 Vaadin 自定义组件无法添加到 MainView 布局的问题的详细内容，更多请关注其它相关文章！

相关文章： ArchiveofOurOwn小说阅读-ArchiveofOurOwn同人作品访问链接  将JSON对象数组转置为键值对列表的实用指南  俄罗斯浏览器官网直达链接 俄罗斯浏览器最新在线入口导航  拼多多购物车商品数量无法修改如何处理 拼多多购物车操作优化方法  TikTok评论显示延迟如何处理 TikTok评论刷新优化方法  Golang如何使用new_Go new分配内存机制讲解  Pyrogram与g4f集成：异步编程实践与常见错误解决  自定义 WooCommerce 购物车：始终显示全部交叉销售商品  优化Django表单：提交验证失败后保留用户输入  126邮箱手机版登录官网2026_126手机邮箱免费入口最新  CSS布局中意外空白：解决padding-top导致的顶部间距问题  抖音隐秘迷城小游戏入口_ 抖音冒险解谜小游戏秒玩  顺丰快递查单号物流信息 顺丰快递小程序查询入口  Django AJAX 文件上传教程：解决图片无法保存到模型的常见问题  在React函数组件中利用原生HTML5进行邮箱地址验证  网易大神账号申诉需要多久_网易大神账号申诉流程说明  Python模块化编程：有效管理依赖与避免循环引用  12306选座怎么选到商务座_12306商务座选择与配置说明  汽水音乐在线版入口_汽水音乐网页播放手册  优化HTML表单样式：解决输入框焦点跳动与元素间距问题  一加 14R 快充无反应_一加 14R 充电优化  漫蛙2漫画入口 漫蛙正版网页漫画直达网址  微博网页版直接访问 微博网页版账号管理快速入口  漫蛙网页登录入口 漫蛙漫画官方授权网址  在Typer应用中优雅地处理和重组任意命令行参数  yandex入口引擎手机版 yandex安卓版下载入口  响应式CSS Grid布局：优化网格项在小屏幕下的堆叠与宽度适配  Win11怎么合并任务栏图标 Win11开启任务栏合并减少图标占空间【方法】  Win10如何清理注册表垃圾 Win10手动清理无效注册表【技巧】  邮编格式怎么匹配地址_根据邮编格式快速匹配详细地址的技巧  使用CSS更改登录屏幕输入框中PNG图标颜色的策略与局限性  J*a中实现Go语言select通道多路复用机制  《铁拳8》黑皮辣妹新实机：元气满满的18岁少女！  2026春节假期时间安排 2026春节假日查询  Win10桌面图标出现小盾牌怎么办 Win10去除UAC图标教程【解决】  必由学官网首页入口 必由学教师网页版登录指南  黑猫投诉统一入口官网 消费者权益保护投诉平台  必由学登录入口 必由学官方网站在线访问链接  将HTML Canvas内容转换为可上传的图像文件（File对象）  Angular中父组件异步更新子组件复选框状态的实践指南  c++中的std::basic_string的SSO优化_c++短字符串优化深度解析  12306几点到几点不能订票？ | 官方最新系统维护时间全解析  C++20的source_location是什么_C++在编译期获取源码位置信息用于日志和断言  黑鲨3Pro怎样在相册开漫画风滤镜_iPhone黑鲨3Pro相册开漫画风滤镜【趣味滤镜】  神经网络二分类模型训练异常：高损失与完美验证准确率的排查与修正  html网页设计源代码怎么运行_运行html网页设计源代码步骤【指南】  腾讯QQ邮箱登录入口_QQ邮箱官方网站使用地址  sublime如何优雅地处理行尾空格_sublime自动清理多余空白字符配置  深入理解Go语言中Map值与方法接收器的交互：为什么需要临时变量  迅雷下载到U盘速度很慢怎么办_迅雷U盘下载慢优化方法