自定义组件在初次渲染时无法在 grapsjs/studio 中显示

Question

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 镀铬可复制演示链接 https://stackblitz.com/edit/vitejs-vite-4noagg?file=src%2FApp.tsx描述一下那个虫子 我第一次在 React 应用渲染时无法看到我的自定义组件，当我尝试在块块部分搜索它时，它就出现了，搜索后可以在块块块中看到它。行为准则[X] 我同意遵守本项目的行为准则

artf · Accepted Answer

当你想在 GrapesJS API 层面扩展某些东西时，可以使用这些插件 “''js <StudioEditor ref={editorRef} 选项={{ 插件：[ editor => addCustomComponent（editor） ], // ... ```

MdShadabAhamad · Answer

我还添加了自定义样式设置StyleManager，但显示是空白的，https://stackblitz.com/edit/vitejs-vite-4noagg?file=src%2FApp.tsx

GJS Helper · Answer

你遇到的问题是，你的自定义组件块在第一次渲染时看不到，但搜索后会出现，这是GrapesJS如何初始化其UI组件，特别是块管理器，以及自定义块何时被注册时有关的常见时间问题。 根本原因 在你提供的StackBlitz示例中，你是在editorInstance.on('load', ...)回调中注册自定义组件（my-component）及其对应的块（my-block）： GrapesJS 中的load事件是在编辑器完成初始设置并渲染完核心界面元素（包括块管理器）之后触发的。块管理器最初渲染时，它会查询所有当前注册的块。由于你的my-block只在这次初次渲染之后（load事件触发时）注册，所以它不会包含在块管理器的初始显示中。 当你搜索该块时，块管理器会重新评估并渲染其块列表。此时，load事件已经触发，你的my-block成功注册，使其在搜索结果和随后的块列表中可见。 解决方案 解决办法是注册你的自定义组件，并在GrapesJS编辑器完全加载和渲染其UI组件之前就进行屏蔽。理想的位置是grapesjs.init()返回editorInstance后立即，但在*load事件触发之前。...

自定义组件在初次渲染时无法在 grapsjs/studio 中显示

问题

GrapesJS 版本

你用的是什么浏览器？

可复制演示链接

描述一下那个虫子

行为准则

回答（3）

相关问答

在 Angular 应用加载时图标没有加载

React 自定义界面“模态”无法显示“代码”

无法读取未定义的属性（读取“lastComponent”）

递归过多

与此问题匹配的付费插件

相关教程

Introducing Search on GJS.Market

GJS.Market Is Now Available for India 🇮🇳

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

浏览插件分类