解决 Vaadin 自定义组件未正确添加到布局的问题

本文旨在解决 Vaadin 应用中自定义组件（特别是使用了 JavaScript 库的组件）无法正确添加到布局的问题。通常表现为组件渲染在布局之外，或者布局中出现空的组件标签。问题的根源在于组件的 ID 处理不当，导致 JavaScript 代码错误地定位了渲染目标。本文将提供一种解决方案，确保每个组件实例都有唯一的 ID，从而避免组件之间的干扰，实现正确渲染。

在 Vaadin 应用中，当使用自定义组件，特别是那些依赖 JavaScript 库进行渲染的组件时，可能会遇到组件无法正确添加到布局中的问题。这通常表现为组件渲染在布局之外，或者布局中出现空的组件标签。问题的核心往往在于组件的 ID 处理不当，导致 JavaScript 代码错误地定位了渲染目标。

以下提供一种解决方案，通过为每个组件实例生成唯一的 ID，可以避免组件之间的干扰，确保它们能够正确渲染到 Vaadin 布局中。

问题分析

问题通常发生在以下场景：

1. 自定义组件使用了 JavaScript 库：例如，vis.js 用于创建网络图。
2. JavaScript 代码依赖于特定的 HTML 元素 ID：例如，document.getElementById("outlet") 用于定位渲染容器。
3. 页面上存在多个具有相同 ID 的元素：这会导致 JavaScript 代码错误地选择了渲染目标。

解决方案

核心思路是为每个自定义组件实例生成唯一的 ID，并将该 ID 传递给 JavaScript 代码，确保 JavaScript 代码能够正确地定位到组件的渲染容器。

Java 代码修改

1. 继承 Composite：使用 Composite 可以更方便地管理组件的内部结构。
2. 生成唯一的 ID：使用随机数生成唯一的 ID，并将其设置为组件的 ID。
3. 将 ID 传递给 JavaScript 函数：将生成的 ID 作为参数传递给 JavaScript 函数，以便 JavaScript 代码能够使用该 ID 定位渲染容器。

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.ObjectWriter;
import com.vaadin.flow.component.Component;
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 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 {

    private static final Random rand = new Random();

    public VisJs(List edges, List 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 = "" + rand.nextInt(limit);
        key = String.format("%" + chars + "s", key).replace(' ', '0');
        return "vis-" + key;
    }
}

JavaScript 代码修改

修改 JavaScript 函数，使其能够接收并使用组件的 ID 来定位渲染容器。

import {DataSet, Network} from "vis";

class VisJsTest {
    init(element, edges, nodes, id) {
        this.element = element;
        this.containerId = id; // Store the 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);

        // Use the stored ID to locate the container
        this.container = document.getElementById(this.containerId);

        this.data = {
            nodes: this.nodes,
            edges: this.edges,
        };
        var options = {};
        this.network = new Network(this.container, this.data, options);
    }
}

HTML 结构

确保 HTML 结构中只有一个具有原始 ID（例如 "outlet"）的元素，或者避免在 JavaScript 中使用硬编码的 ID。

注意事项

• ID 的唯一性：确保生成的 ID 在整个页面中是唯一的。可以使用更复杂的 ID 生成策略，例如结合时间戳和随机数。
• 错误处理：在 JavaScript 代码中添加错误处理，以防止由于 ID 找不到元素而导致的问题。
• 组件生命周期：注意组件的生命周期，确保在组件销毁时清理相关的 JavaScript 资源，避免内存泄漏。
• CSS 样式：确保组件的 CSS 样式不会影响其他组件的渲染。

总结

通过为每个自定义组件实例生成唯一的 ID，并将该 ID 传递给 JavaScript 代码，可以有效地解决 Vaadin 应用中自定义组件无法正确添加到布局的问题。这种方法可以确保 JavaScript 代码能够正确地定位到组件的渲染容器，避免组件之间的干扰，实现正确的渲染。在实际开发中，需要根据具体情况调整代码，并注意 ID 的唯一性、错误处理和组件生命周期等问题。