使用 LWC 自定义组件展示层级 JSON 数据树

本文将介绍如何在 Lightning Web Component (LWC) 中，不使用 lightning-tree 组件，而是通过自定义方式展示层级结构的 JSON 数据，形成可折叠的树形结构。我们将探讨如何利用 JavaScript 库来实现这一目标，并提供一些可选方案供您参考。

由于 lightning-tree 组件可能在某些场景下不够灵活，或者您需要更精细的控制，因此自定义组件展示树形 JSON 数据成为一个常见的需求。虽然 LWC 本身不直接提供内置的树形组件，但我们可以借助第三方 JavaScript 库来实现这一功能。

核心思路：

1. 引入合适的 JavaScript 库： 选择一个合适的 JSON 树形展示库，例如 jQuery JSONViewer，jsTree，或者其他类似的库。这些库通常提供了将 JSON 数据转换为可交互树形结构的功能。
2. 在 LWC 中加载库： 使用 loadScript 函数在 LWC 中加载所选的 JavaScript 库和其依赖的 CSS 样式。
3. 解析 JSON 数据： 将需要展示的 JSON 数据传递给库，并初始化树形结构。
4. 渲染到 DOM： 将生成的树形结构渲染到 LWC 的 DOM 中。
5. 处理交互事件： 如果需要，可以监听树形结构的交互事件（例如节点展开/折叠），并执行相应的操作。

具体步骤（以 jQuery JSONViewer 为例）：

1. 安装 jQuery 和 jQuery JSONViewer (如果适用)：

如果你的项目还没有 jQuery，需要先安装 jQuery，然后再安装 jQuery JSONViewer。可以通过静态资源引入，也可以使用 npm 安装并引入。

2. 创建 LWC 组件：

创建一个新的 LWC 组件，例如 jsonTreeViewer。

3. 引入静态资源：

将 jQuery 和 jQuery JSONViewer 的 JavaScript 和 CSS 文件上传到 Salesforce 作为静态资源。 假设你创建了名为 jquery 和 jsonViewer 的静态资源，分别包含 jQuery 和 JSONViewer。

4. LWC 组件代码 (jsonTreeViewer.js)：

import { LightningElement, api, track } from 'lwc';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import jquery from '@salesforce/resourceUrl/jquery';
import jsonViewer from '@salesforce/resourceUrl/jsonViewer';
export default class JsonTreeViewer extends LightningElement {
@api jsonData; // 接收 JSON 数据
@track isLibLoaded = false;
renderedCallback() {
if (this.isLibLoaded) {
return;
}
Promise.all([
loadScript(this, jquery + '/jquery.min.js'),
loadScript(this, jsonViewer + '/jquery.jsonview.js'),
loadStyle(this, jsonViewer + '/jquery.jsonview.css')
])
.then(() => {
this.isLibLoaded = true;
this.initJsonViewer();
})
.catch(error => {
console.error('Error loading libraries', error);
});
}
initJsonViewer() {
if (this.isLibLoaded && this.jsonData) {
const container = this.template.querySelector('.json-container');
$(container).JSONView(JSON.parse(this.jsonData)); // 解析 JSON 字符串
}
}
}

5. LWC 组件模板 (jsonTreeViewer.html)：

<template>
<template if:true={isLibLoaded}>
<div class="json-container"></div>
</template>
<template if:false={isLibLoaded}>
<div>Loading...</div>
</template>
</template>

6. 使用组件：

在你的父组件中，将 JSON 数据传递给 jsonTreeViewer 组件。

<c-json-tree-viewer json-data='{ "name": "John", "age": 30, "city": "New York" }'></c-json-tree-viewer>

注意事项：

• JSON 数据格式： 确保传递给组件的 jsonData 是有效的 JSON 字符串。
• 错误处理： 在加载库时，添加适当的错误处理机制，以防止加载失败导致组件无法正常工作。
• 库的选择： 不同的 JavaScript 库有不同的特性和 API。选择最适合你需求的库。
• 性能考虑： 对于大型 JSON 数据，渲染树形结构可能会影响性能。可以考虑使用虚拟化技术或懒加载等优化手段。
• 安全问题: 对接收到的JSON数据进行适当的验证和转义，以防止潜在的安全漏洞，如跨站脚本攻击 (XSS)。

总结：

通过引入第三方 JavaScript 库，我们可以轻松地在 LWC 中自定义组件来展示层级结构的 JSON 数据。 这种方法提供了更大的灵活性，可以根据具体需求定制树形结构的样式和交互行为。 选择合适的库，并遵循最佳实践，可以构建出功能强大且用户友好的 JSON 树形展示组件。