React Material UI 可视化编辑器

Question

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

这是项目的link。

用户可以将左侧抽屉中的 material 组件拖放到拖放区（middle/user 布局），并使用右侧抽屉中的工具箱编辑 CSS dropzone 中的各个组件。最后单击按钮，平台将生成 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()。

link 到 createRef()

我生成组件的 ID：

import { nanoid } from '@reduxjs/toolkit'

Answer 1

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

查看我的媒体 post 并给它一些鼓掌：https://medium.com/@kenneth.gzhao/react-material-ui-visual-editor-d1949262bce4

React Material UI 可视化编辑器

React Material UI Visual Editor

reactjs

react-native

material-ui