问题 #4837✓ 已解决提出于 2023年1月10日作者 quentin-bettoum4 个反应

HTML元素的ID会在projectData加载的不同页面上递增

快速解答作者 artf❤ 2

嘿，@bgrand-ch，我认为有一天所有Grapesjs实体都会有一个全局“UID”，所以从长远来看，我预计这个问题会被修复 🤞

问题

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox 109 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子你好，我注意到当我在 projectData 中加载多个 HTML 中使用相同“id”的页面时，葡萄会自动在每个页面上增加“id”，尽管这些是不同的页面。为了演示这个问题，下面有一段代码，我用包含两个页面的“projectData”初始化 grapesjs，这两个页面在某些 HTML 标签上使用相同的 ID。在最终的HTML列表中，你可以看到像“body”和“main-title”这样的id在第二页被递增为“body-2”和“main-title-2”。 “''js const editortest = grapesjs.init（{ 无头：确实如此， projectData： { 页码：[ { “框架”： [ { “组件”： { “类型”：“包装器”， “可时尚”：[ “背景”， “背景色”， “背景图像”， “背景重复”， “背景-附着”， “背景位置”， “背景大小” ], “属性”：{ “身份”：“身体” }, “组件”： [ { “tagName”： “section”， “组件”： [ { “tagName”： “h1”， “type”： “text”， “属性”...

回答（4）

👍 最有帮助artf• 2025年1月27日

嘿，@bgrand-ch，我认为有一天所有Grapesjs实体都会有一个全局“UID”，所以从长远来看，我预计这个问题会被修复 🤞

quentin-bettoum• 2023年1月27日

起初，我想把所有页面一起生成，这样所有页面都能输出一个统一的CSS输出。但现在我尝试另一种风格方案。

所以对于“id”问题，分别生成每个页面可能是解决方案。谢谢你的建议。

bgrand-ch• 2023年9月26日

Grapes 使用一些数据属性（类似“data-grapes-id”）作为唯一标识符，以便让 id 留给某些前端脚本使用。

我喜欢这个想法 💯

ClaudeCode• 2026年5月17日

谢谢你举报，@quentin-bettoum。在 projectData 加载的不同页面上 HTML 元素 ID 递增的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：** 如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因在报告中包含 GrapesJS 版本、浏览器和控制台错误

在 GitHub 上查看完整讨论 →