PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #2629✓ 已解决提出于 2020年3月9日作者 vitor-peixoto2 个反应

可以用 React 组件创建组件吗?

快速解答作者 pouyamiralayi❤ 2

这里@TRUEND一个[示例](https://github.com/beepsoft/grapesjs-react-component-example) 干杯!

阅读下方完整回答 ↓

问题

是否有可能从某个库中创建一个或获取一个 React 组件,然后插入为允许的组件来创建模板?

从 'react' 导入 React;
从 './components/CustomButton' 导入 CustomButton
从 'Grapesjs' 导入 Grapesjs

const editor = Grapesjs.init({
...
});

editor.addComponents(<CustomButton color=“red” otherProp={...somepros}/>);

或

编辑。BlockManager.add('CustomButton', {
  标签:“按钮”,
  内容:<自定义按钮 color=“red” otherProp={...somepros}/>,
});

回答(1)

相关问答

通过相似的问题讨论继续研究。

问题 #4572

Page update event doesn't fire

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 镀铬 可复制演示链接 https://jsfiddle.net/1hza4t9n/ 描述一下那个虫子 如何复现这个漏洞?初始化 grapes创建事件处理程序,用于页面更新时使用。更新页面...

4 个回答更新于 2025年3月6日

问题 #4225

The facebook plugin is not working in the grapes js

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome v9可复制演示链接 不是在那里描述一下那个虫子 如何复现这个漏洞?在 React 应用中安装 Grapes js 并运行制作 Facebook 插件组件并导入 grapes j...

4 个回答更新于 2022年3月31日

问题 #3975

背景图片 如果只添加一页,所有页面开始重复

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome v9可复制演示链接 什么都没有描述一下那个虫子 如何复现这个漏洞?实现多页概念创建3页点击装饰品中的背景图片(样式管理器),并将其添加到首页现在添加新页面或点击第二页或第三页...

2 个回答更新于 2022年1月20日

问题 #3832

每次重载后,CSS 类都会被移除,并且每个 HTML 标签的自动生成 ID(例如:ivj5m-2)都会被更改

GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 不是在那里 描述一下那个虫子 如何重现这个bug? 在 React 应用中安装 grapes js 进入编辑器,拖动一个组件。(示例:文本组件) 使用样式管理器为组件做样...

4 个回答更新于 2021年9月29日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

浏览插件分类

直接跳转到市场上的插件分类页面。