电商网站可视化编辑 js

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
`;

import React, { useState, useCallback } from 'react';

function Editor() {
  const [content, setContent] = useState('');

  const handleChange = useCallback((event) => {
    setContent(event.target.value);
  }, []);

  return (
    <div>
      <textarea onChange={handleChange} />
      <Preview content={content} />
    </div>
  );
}

<!-- 引入Polyfill -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

import React, { useState } from 'react';
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';

function VisualEditor() {
  const [components, setComponents] = useState([
    { id: 1, type: 'text', content: 'Hello World', x: 10, y: 10 },
  ]);

  const handleDrag = (id, newX, newY) => {
    setComponents(prev => 
      prev.map(component => 
        component.id === id ? { ...component, x: newX, y: newY } : component
      )
    );
  };

  return (
    <div style={{ position: 'relative', height: '500px', border: '1px solid black' }}>
      {components.map(component => (
        <ResizableBox
          key={component.id}
          width={200}
          height={100}
          x={component.x}
          y={component.y}
          onDrag={({ x, y }) => handleDrag(component.id, x, y)}
        >
          <div>{component.content}</div>
        </ResizableBox>
      ))}
    </div>
  );
}

export default VisualEditor;