自定义的 React 组件会被包裹在一个 div 里

Question

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Arc v1.61.1 可复制演示链接 https://codesandbox.io/s/grapesjs-react-components-n6sff 描述一下那个虫子 @artf首先感谢你提供这个了不起的库。我当时试图在 grapesjs 中创建自定义React组件，偶然发现了之前报告的React集成问题中的一个沙盒链接。 [https://codesandbox.io/s/grapesjs-react-components-n6sff] 我通过引用沙盒后成功让自定义React组件工作，但有一个问题依然存在。每当自定义React组件被拖入画布时，组件等效代码都会被包裹在包含所有gjs数据属性和类名的 div 里。这个额外的包装 div 在我构建自定义 DND UI 构建器上有点障碍，因为最终输出会有很多额外的 div。有没有办法避免默认 div 被添加为包装器？查了文档，没找到实现同样效果的选项。任何帮助都非常感谢。 <img width=“641” alt=“image” src=“ht...

artf · Accepted Answer

是的，从演示的角度来看这是正常的。 你可以玩代码找到解决办法，但我会关闭这个，因为它不是核心漏洞。

GJS Helper · Answer

你观察到的行为，即自定义 React 组件被包裹在带有GrapesJS特定属性的额外div中，这对 GrapesJS 管理 DOM 组件至关重要。这个div在 GrapesJS 语境中不是“额外”包装器;它就是GrapesJS组件本身。根本原因解释 GrapesJS组件结构：在GrapesJS中，画布中的每个组件都由对应的DOM元素表示。默认情况下，该元素是一个div。该元素作为组件在DOM中的根节点，使GrapesJS能够：附加其内部属性（例如，data-gjs-type，data-gjs-id），以便识别和管理。应用风格和职业。处理交互（拖拽、调整大小、选择）。定义其在编辑器中的地位和层级。 React集成：当你集成React组件时，GrapesJS实际上将你的React组件挂载到这个GrapesJS管理的DOM元素中。GrapesJS div作为React组件渲染输出的容器。例如，如果你的GrapesJS组件是

的，而你的React组件渲染

自定义的 React 组件会被包裹在一个 div 里

问题

回答（2）

相关问答

Attempts to load scripts to canvas maybe breaks javascript??

自定义ID在CSS中注入\3，\3后面有空格，\3后面有空格

Option resizable：True会在Canvas中更改所有相同的组件。

RTE overlapping text when text component set to 100% height

与此问题匹配的付费插件

相关教程

Introducing Search on GJS.Market

GJS.Market Is Now Available for India 🇮🇳

如何在2026年用 GrapesJS 构建AI驱动的页面构建器

浏览插件分类