组件属性的变化会在所有实例中重现，而不仅仅是一个实例
感谢@rmadeiraneto的报告。是的，不幸的是，如果你以这种方式变异数组/对象属性，这就是个问题，为了避免这种情况，你有两个选择：避免直接变异（更新时分配新引用）将“默认值”定义为函数 “''js 默认值： （） => （{ customArray： [1,2,3] }）， ``` 但不幸的是......第二个选项现在😅不行，我会在下一个版本修复它
阅读下方完整回答 ↓问题
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v114 可复制演示链接 https://jsfiddle.net/rmadeiraneto/t659usxv/39/ 描述一下那个虫子 如何复现这个漏洞？进入块列表，将自定义组件“示例”拖到画布上画布中显示三个来自默认属性（数组）的元素选择“示例”组件进入特质面板，点击加号图标几次这将将示例组件属性中的项目添加到数组中，并在页面中绘制将另一个示例块拖入画布注意你添加到数组中的项目也在该组件的新实例中显示 预期的行为是什么？ 在更改第一个组件的属性后创建第二个组件实例时，通常第二个组件的属性应是默认值 '[1,2,3]' 中定义的第一个数组，而非操作后的数组 '[1,2,3,4,5]'。 目前的行为是什么？ 当我们更改组件实例的属性时，因为默认对象的引用可能被保留，我们也在改变组件的默认值，使得对单个组件实例的更改会在同一组件的所有实例中重现。当GrapesJs为组件属性分配自定义默认值时，它需要创建一个对象的浅表副本。当用字符串或整数做同样的东西，而不是对象或数组时，这个问题没有被验证，所以我认为关键是在分配组件属性时保留“默认”对象的引用。行为准则 [X] 我同意遵守本项目的行为准则
回答（3）
感谢@rmadeiraneto的报告。是的，不幸的是，如果你以这种方式变异数组/对象属性，这就是个问题，为了避免这种情况，你有两个选择：
- 避免直接变异（更新时分配新引用）
- 将“默认值”定义为函数 “''js 默认值： （） => （{ customArray： [1,2,3] }），
但不幸的是......第二个选项现在😅不行，我会在下一个版本修复它
@artf使用默认值作为函数是可行的，感谢你的快速回复和提供解决这个问题的替代方案。 关于第一个建议，我认为问题不在于人们是否应该变异或不变异对象，因为我们讨论的是使用提供的方法（集合）。抱歉我没时间看源代码，但你很可能在“set”方法里变了默认对象，可能是因为引用来自组件生命周期的早期。同样，没有深入看代码，我假设当你将默认值与组件属性合并时，你保留了对默认对象的引用，而不是使用会返回副本的合并方法，比如 from immutable。 我会尽量找时间研究代码，并提出更具体的建议
再次感谢你提供的替代方案和这个了不起的图书馆，继续保持出色的工作！
谢谢你举报，@rmadeiraneto。 关于组件属性的变化在所有实例中重现，而不仅仅是一个实例的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细致跟踪 构建一个插件，扩展编辑器并具备此功能 正式宣布： 如果此功能能惠及更多用户，考虑在 G...
相关问答
通过相似的问题讨论继续研究。
问题 #3700
设置可拖拽：'wrapper' 不会在 wrapper 中丢弃
警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可...
问题 #5705
编辑器大小调整时组件工具会出现错位
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://jsfiddle.net/Lk2bwhp4/ 描述一下那个虫子 如何复现这个漏洞？将编辑器放入容器中，然后通过程序调整容器的宽度。 预期的行...
问题 #5460
从“pageManager”加载“组件”和“样式”
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome v117.0.5938.149可复制演示链接 https://jsfiddle.net/9oLrsvya/描述一下那个虫子 如何复现这个漏洞？请参见 jsfiddle 中的“pageMa...
问题 #5334
在画布中选择自定义组件类型无法正常工作
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome、Opera、Edge 等 可复制演示链接 https://jsfiddle.net/crszh0jo/6/ 描述一下那个虫子 我正在尝试让它像这里描述的那样工作[[问题] Canva...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
教程
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
浏览插件分类
直接跳转到市场上的插件分类页面。