如何在Electron中动态添加指定数组中的段落？

嘿，这个需求不难搞定！你要动态添加的这些段落都绑定了i18next的国际化标识，所以得同时处理DOM插入和国际化渲染这两块，我给你具体拆解一下实现步骤：

第一步：准备DOM容器 #

首先在你的渲染进程HTML文件里，先定义一个用来存放这些动态段落的容器，比如：

<div id="user-guide-container"></div>

第二步：编写渲染进程JS逻辑 #

Electron里主进程不能直接操作DOM，所以所有相关逻辑都要放在渲染进程的JavaScript文件中，这里提供两种实现方式：

方式一：逐个添加并翻译（适合需要逐个处理元素的场景） #

// 你的段落内容数组
const infoArray = [
  "<p data-i18next='userGuideInfo.microbreak'></p>",
  "<p data-i18next='userGuideInfo.break'></p>",
  "<p data-i18next='userGuideInfo.notif'></p>",
  "<p data-i18next='userGuideInfo.tray1'></p>",
  "<p data-i18next='userGuideInfo.tray2'></p>",
  "<p data-i18next='userGuideInfo.tray3'></p>",
  "<p data-i18next='userGuideInfo.setting1'></p>",
  // 剩下的段落元素...
];

// 获取容器元素
const guideContainer = document.getElementById('user-guide-container');

// 遍历数组处理每个段落
infoArray.forEach(escapedHtml => {
  // 把转义的HTML字符串还原成真实的DOM元素
  const parser = new DOMParser();
  const doc = parser.parseFromString(escapedHtml, 'text/html');
  const paragraph = doc.body.firstElementChild;

  // 将段落添加到容器
  guideContainer.appendChild(paragraph);

  // 触发i18next翻译这个新元素（确保i18next已提前初始化）
  i18next.translateElement(paragraph);
});

方式二：批量添加后统一翻译（性能更优） #

如果不需要逐个处理元素，直接批量拼接HTML再统一翻译会更高效：

// 拼接所有转义的HTML字符串
const combinedHtml = infoArray.join('');
const guideContainer = document.getElementById('user-guide-container');

// 一次性插入到容器
guideContainer.innerHTML = combinedHtml;

// 翻译容器内所有带data-i18next属性的元素
i18next.translateElement(guideContainer);

关键注意事项 #

• i18next初始化：确保你已经在渲染进程中正确初始化了i18next，包括加载对应的翻译资源（比如包含userGuideInfo.microbreak这些key的JSON文件），否则段落会显示为空或者直接显示key值。
• 安全性：如果你的infoArray内容来自不可信来源，建议用DOMParser的方式处理DOM，避免直接使用innerHTML带来的XSS风险；如果是可信来源，两种方式都可以。
• 进程限制：记住Electron的主进程不能直接操作DOM，所有DOM操作必须放在渲染进程中执行，如果需要从主进程触发，可以通过IPC通信通知渲染进程执行上述逻辑。

内容的提问来源于stack exchange，提问作者Kavya Jain