本文旨在解决 Vaadin 项目中，使用 `@Tag` 注解自定义的组件未能正确添加到 MainView 布局的问题。通过分析问题的根源，即组件的 HTML 元素缺少唯一的 ID，导致 JavaScript 代码错误地将组件渲染到页面上的其他位置。本文将提供一种解决方案，通过为组件生成唯一的 ID，并更新 JavaScript 代码以使用该 ID，从而确保组件能够正确地渲染到 Vaadin 布局中。
在 Vaadin 项目中，使用 @Tag 注解创建自定义组件时，可能会遇到组件无法正确添加到 MainView 布局中的问题。表现为组件渲染在布局之外，或者布局中只包含一个空的组件标签。这通常是由于 JavaScript 代码中的元素选择器错误地选择了页面上的其他元素，而不是自定义组件对应的元素。
问题分析
问题的核心在于，自定义组件的根 HTML 元素缺少一个唯一的 ID。当 JavaScript 代码使用 document.getElementById("outlet") 等方法来查找组件的容器时，如果页面上存在其他具有相同 ID 的元素，JavaScript 代码可能会错误地选择这些元素。
解决方案
解决此问题的关键是为自定义组件的根 HTML 元素生成一个唯一的 ID，并更新 JavaScript 代码以使用该 ID 来查找组件的容器。以下是具体的步骤：
-
修改 Java 组件代码
首先，需要修改 Java 组件代码，使其能够生成并设置唯一的 ID。可以使用 Composite 类来创建一个包含 Div 元素的组件，并为该 Div 元素设置一个随机生成的 ID。
Money Knowledge下载金钱与财富知识助手。提供关于金钱的基本概念、理财知识、投资原则、财富思维等方面的内容。适用于：1) 了解金钱的基本知识；2) 学习理财和投资原则；3) 培养财富思维；4) 了解经济学基础概念。
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 java.util.List; import java.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>，这意味着它将包含一个 Div 元素作为其内容。在构造函数中，我们生成了一个随机的 ID，并将其设置为 Div 元素的 ID。initContent方法用于初始化组件的内容，确保ID被正确设置。setId 和 getId 方法用于设置和获取组件的 ID。
-
修改 JavaScript 代码
接下来，需要修改 JavaScript 代码，使其能够接收组件的 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 正确地传递给 JavaScript 代码。在 Vaadin 中，可以使用 getElement().executeJs() 方法将数据传递给 JavaScript 代码。
- 组件生命周期： 考虑组件的生命周期。如果组件在运行时被动态创建或销毁，可能需要相应地更新 ID。
总结
通过为 Vaadin 自定义组件生成唯一的 ID，并更新 JavaScript 代码以使用该 ID 来查找组件的容器，可以解决组件无法正确添加到 MainView 布局中的问题。这种方法确保了 JavaScript 代码能够正确地选择组件对应的 HTML 元素，从而保证组件能够正确地渲染到 Vaadin 布局中。
