本文旨在解决 Vaadin 应用中自定义组件（特别是使用了 JavaScript 库的组件）无法正确添加到布局的问题。通常表现为组件渲染在布局之外，或者布局中出现空的组件标签。问题的根源在于组件的 ID 处理不当，导致 JavaScript 代码错误地定位了渲染目标。本文将提供一种解决方案，确保每个组件实例都有唯一的 ID，从而避免组件之间的干扰，实现正确渲染。
在 Vaadin 应用中，当使用自定义组件，特别是那些依赖 JavaScript 库进行渲染的组件时，可能会遇到组件无法正确添加到布局中的问题。这通常表现为组件渲染在布局之外，或者布局中出现空的组件标签。问题的核心往往在于组件的 ID 处理不当，导致 JavaScript 代码错误地定位了渲染目标。
以下提供一种解决方案，通过为每个组件实例生成唯一的 ID，可以避免组件之间的干扰，确保它们能够正确渲染到 Vaadin 布局中。
问题分析
问题通常发生在以下场景：
- 自定义组件使用了 JavaScript 库：例如，vis.js 用于创建网络图。
- JavaScript 代码依赖于特定的 HTML 元素 ID：例如，document.getElementById("outlet") 用于定位渲染容器。
- 页面上存在多个具有相同 ID 的元素：这会导致 JavaScript 代码错误地选择了渲染目标。
解决方案
核心思路是为每个自定义组件实例生成唯一的 ID，并将该 ID 传递给 JavaScript 代码，确保 JavaScript 代码能够正确地定位到组件的渲染容器。
Java 代码修改
- 继承 Composite<Div>：使用 Composite 可以更方便地管理组件的内部结构。
- 生成唯一的 ID：使用随机数生成唯一的 ID，并将其设置为组件的 ID。
- 将 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<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 = "" + 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 的唯一性、错误处理和组件生命周期等问题。
