【问题标题】：Functionally, how do drag and drop page builders work?从功能上讲，拖放页面构建器如何工作？
【发布时间】：2021-08-28 18:44:03
【问题描述】：
我正在处理我的第一个广泛的 MERN 项目，部分功能涉及特定组件（如复选框待办事项列表、图像、文本等...），然后允许用户构建不同的页面，更大多复选框聚合列表等...可以将其视为https://www.notion.so/notes。
构建单个反应组件并在静态页面上配置它们很简单。但是，我很难从概念上理解如何使用这些组件，然后动态地允许用户使用它们构建自定义页面。
从广义上讲，页面构建器在功能上是如何工作的？
【问题讨论】：
标签：
javascript
node.js
reactjs
mongodb
express
【解决方案1】：
这是一个广泛的想法。您将需要一个页面，其中左侧列出了所有 UI 组件 [thump nails]，右侧区域用于拖放这些组件。您将需要一个带有行和列组件的网格系统，例如 Bootstrap Grid 或 MUI Grid 将空间划分为 12 个部分，以用于任何页面的布局。您应该让每个已删除的组件都提供一个选项来接受其道具，以便用户可以设置它。设置 props 可以是另一个组件。
当他们保存设计时，您应该获取他们保存的内容的反应组件树以及所有属性，并将其保存在您的数据库中。您应该能够使用这些保存的数据生成设计视图和实际视图。
说起来很容易，但我知道这需要做很多工作。我见过使用 Angular 和 .NET 完成的类似工作。