React中如何在鼠标点击位置动态添加div？

核心实现思路 #

React采用数据驱动视图的模式，不能像原生JS那样直接操作DOM动态创建元素。正确的实现方式是：

• 通过useState维护一个数组，存储所有需要渲染的子元素的位置坐标
• 点击指定区域时，将当前点击的坐标数据添加到数组中
• 遍历数组，动态渲染对应的子元素

完整代码示例 #

import { useState } from 'react';

const App = () => {
  // 存储所有子元素的坐标，初始为空数组
  const [elements, setElements] = useState([]);

  const imgAdder = (e) => {
    // 计算点击位置相对于main元素的偏移量（若要相对于页面，直接用e.pageX/e.pageY）
    const mainRect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - mainRect.left;
    const y = e.clientY - mainRect.top;
    
    // 将新坐标追加到状态数组中
    setElements(prevElements => [...prevElements, { x, y }]);
  };

  return (
    <main 
      onClick={imgAdder}
      style={{
        position: 'relative',
        width: '100vw',
        height: '100vh',
        backgroundColor: '#E1E7E8'
      }}
    >
      <h2 style={{ zIndex: 10, position: 'absolute' }}>Click anywhere</h2>
      {/* 遍历状态数组，渲染所有子元素 */}
      {elements.map((el, index) => (
        <div
          key={index}
          style={{
            position: 'absolute',
            top: `${el.y}px`,
            left: `${el.x}px`,
            width: '50px',
            height: '50px',
            backgroundColor: 'red',
            border: '1px solid black',
            transform: 'translate(-50%, -50%)'
          }}
        />
      ))}
    </main>
  );
};

export default App;

关键细节说明 #

• 状态管理：使用useState维护elements数组，每次点击都会追加新的坐标对象，React会自动触发视图更新，渲染新的子元素
• 坐标计算：如果子元素需要相对于main定位，需通过getBoundingClientRect()获取main的位置信息，计算点击点相对于main的偏移量；若要相对于整个页面，直接使用e.pageX和e.pageY即可
• 样式适配：main必须设置position: relative，内部绝对定位的子元素才会以main为参考容器；transform: translate(-50%, -50%)用于让子元素中心点对齐点击位置，和原生示例效果一致
• 列表key值：遍历渲染列表时必须给每个元素设置唯一key，示例中用index是简化方案，实际项目中建议使用具备唯一性的ID值

内容的提问来源于stack exchange，提问作者Laiqa Mohid