解决 Vaadin 自定义组件无法添加到 MainView 布局的问题

本文旨在解决 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 来查找组件的容器。以下是具体的步骤：

1. 修改 Java 组件代码

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

   

   AI Web Designer

   AI网页设计师，快速生成个性化的网站设计

   下载

   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。

2. 修改 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 布局中。