如何使用React语句属性移动div元素

import React from 'react';

const MoveableDiv = ({ x, y }) => {
  const divStyle = {
    position: 'absolute',
    left: x,
    top: y,
    width: '100px',
    height: '100px',
    backgroundColor: 'red',
  };

  return <div style={divStyle}></div>;
};

export default MoveableDiv;

import React from 'react';

class MoveableDiv extends React.Component {
  render() {
    const { x, y } = this.props;
    const divStyle = {
      position: 'absolute',
      left: x,
      top: y,
      width: '100px',
      height: '100px',
      backgroundColor: 'red',
    };

    return <div style={divStyle}></div>;
  }
}

export default MoveableDiv;

import React from 'react';
import MoveableDiv from './MoveableDiv';

const App = () => {
  const handleMouseMove = (event) => {
    // 根据鼠标移动事件更新x和y坐标
    const x = event.clientX;
    const y = event.clientY;

    // 渲染MoveableDiv组件，并传递x和y坐标
    return <MoveableDiv x={x} y={y} />;
  };

  return <div onMouseMove={handleMouseMove}></div>;
};

export default App;