React中使用MoveableJS实现动态添加元素可拖拽的问题

问题核心在于：Moveable组件初始化时会根据传入的target选择器（此处为.target）查询一次DOM元素，后续动态添加的元素不会被自动纳入监听范围。要让新元素可拖拽，需要在元素添加后通知Moveable更新目标列表。

解决方案：监听元素列表变化，动态更新Moveable的target #

通过以下步骤实现：

1. 用Ref跟踪容器：获取存放目标元素的容器节点，方便后续查询所有.target元素
2. 监听状态变化：当box状态更新（新增元素）时，重新查询容器内的所有目标元素
3. 动态传递target：将最新查询到的元素列表传给Moveable的target属性

修改后的代码如下：

import * as React from 'react';
import Moveable from 'react-moveable';
import './App.css';

export default function App() {
  const containerRef = React.useRef(null);
  const [box, setBox] = React.useState([]);
  const [targets, setTargets] = React.useState([]);

  // 监听box变化，更新目标元素列表
  React.useEffect(() => {
    if (containerRef.current) {
      const newTargets = Array.from(containerRef.current.querySelectorAll('.target'));
      setTargets(newTargets);
    }
  }, [box]);

  function addBox() {
    setBox((prevboxes) => {
      return [...prevboxes, `target${prevboxes.length + 1}`];
    });
  }

  return (
    <div className="root">
      <button onClick={addBox}>Add box</button>
      <div className="container" ref={containerRef}>
        <div className="target">Target</div>
        {box.map((boxElement, index) => {
          return (
            <div key={index} className="target" id={boxElement}>
              Target
            </div>
          );
        })}
        <Moveable
          target={targets}
          draggable={true}
          throttleDrag={1}
          edgeDraggable={false}
          startDragRotate={0}
          throttleDragRotate={0}
          onDrag={(e) => {
            e.target.style.transform = e.transform;
          }}
        />
      </div>
    </div>
  );
}

关键修改点说明： #

• 添加containerRef：绑定到存放目标元素的容器，用于后续查询DOM元素
• 新增targets状态：存储当前所有可拖拽的目标元素节点
• useEffect监听box变化：每次添加新元素后，重新查询容器内的.target元素并更新targets
• Moveable的target改为targets：确保Moveable始终使用最新的元素列表
• 给动态元素加key：符合React列表渲染规范，避免不必要的重渲染问题

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