无需代码也能实现可视化编辑，React极简实现

2023-12-05 08:45:55

在构建现代化和交互式应用程序时，可视化编辑器是必不可少的工具。它们使非技术人员能够轻松创建和修改内容，而无需编写一行代码。本文将引导你使用React创建一个基本的但功能强大的可视化编辑器模板，它可以满足各种用例。

我们这个轻量级的React可视化编辑模板的主要功能包括：

修改字段
使用flex布局重新排序元素
运用absolute定位移动元素位置
控制元素的可见性

入门

1. 项目初始化

使用npx创建新的React项目：

npx create-react-app my-visual-editor

2. 安装依赖项

我们只需要一个库：

npm install react-dnd

3. 创建组件

在src文件夹下创建以下文件：

VisualEditor.js ：主要的可视化编辑器组件
Field.js ：单个可编辑字段的组件
Element.js ：可拖放元素的组件

实现可视化编辑器

VisualEditor.js

import { useState } from "react";
import { DragDropContext, Droppable } from "react-dnd";
import Element from "./Element";

const VisualEditor = () => {
  const [elements, setElements] = useState([
    { id: 1, type: "field", label: "Name", value: "" },
    { id: 2, type: "button", label: "Submit" }
  ]);

  const handleDrop = (item, monitor) => {
    const draggedItem = elements.find(e => e.id === monitor.getItem().id);
    const index = elements.indexOf(draggedItem);
    elements.splice(index, 1);
    elements.splice(monitor.getDropResult().index, 0, draggedItem);
    setElements([...elements]);
  };

  return (
    <DragDropContext onDragEnd={handleDrop}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {elements.map(element => (
              <Element key={element.id} element={element} />
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default VisualEditor;

Field.js

import { useState } from "react";

const Field = ({ label, value, onChange }) => {
  const [value, setValue] = useState(value);

  const handleChange = (e) => {
    setValue(e.target.value);
    onChange && onChange(e.target.value);
  };

  return (
    <div>
      <label>{label}</label>
      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
};

export default Field;

Element.js

import { useState, useRef } from "react";
import { Draggable } from "react-dnd";

const Element = ({ element }) => {
  const ref = useRef(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleDrag = (e, data) => {
    setPosition({ x: data.x, y: data.y });
  };

  return (
    <Draggable item={element} dragRef={ref} onDrag={handleDrag}>
      {(provided) => (
        <div
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          ref={ref}
          style={{
            position: "absolute",
            left: position.x,
            top: position.y
          }}
        >
          {element.label}
        </div>
      )}
    </Draggable>
  );
};

export default Element;

使用可视化编辑器

在App.js中导入并使用VisualEditor组件：

import VisualEditor from "./VisualEditor";

function App() {
  return (
    <div className="App">
      <VisualEditor />
    </div>
  );
}

export default App;