React Material UI 可视化编辑器

Question

我正在启动一个开源项目，一个用于 React Material UI 的可视化编辑器。

这是项目的链接。

用户将能够将左侧抽屉中的材料组件拖放到放置区（中间/用户布局），并使用右侧抽屉上的工具箱编辑放置区中的各个组件 CSS。 最后单击按钮，该平台将生成 react/react-material-ui 代码，并且还能够将 xml 结构转换为 json 以用于各种设备用途。

这个项目处于最初阶段，我只有 1 个按钮组件。

在深入研究之前，我想了解我当前的实现是否有效，或者是否有更好的方法来实现它。

特别：

当我处理拖动开始时：

ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.effectAllowed = 'copy';
ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML);

当我处理掉落时：

ev.preventDefault();
ev.stopPropagation();
let html = ev.dataTransfer.getData("text/html");
ev.currentTarget.style.border = "none";
let text = ev.dataTransfer.getData("text/plain");
let element = document.getElementById(text)
let element_prime = element.cloneNode(true)
ev.currentTarget.append(element_prime)

我之所以感到不舒服，是因为我实际上是在使用文档查询，这不完全是做事的“反应方式”。

我正在考虑在工具箱区域中处理 CSS 时在拖放区中选择组件时仅使用createRef() 。

链接到 createRef()

我使用以下方法生成组件的 ID：

import { nanoid } from '@reduxjs/toolkit'

Answer 1

######## 更新 - 2022 年 4 月 26 日 ######## 基于完成的一些工作并重新查看@tunaayberk 的评论，我找到了一种以反应方式优雅地处理它的方法。 所以 react-dnd 确实使用了 redux 流并且它有自己的提供者。 形成分层 json 树的更好方法是将其实际存储在全局 state 中，并仅从 json 树中渲染 dropzone 中的组件。 这样我们就不用处理 MUI 类名、DOM 嵌套目标等。使用反应方式处理这个项目的优雅方式。

查看我的中篇文章并鼓掌：https://medium.com/@ke.neth.gzhao/react-material-ui-visual-editor-d1949262bce4