Reactjs ReactNext.js，以艰难的方式平移 SVG

试着在这里做一个互动的平面图.继续，一些答案已经被看到了.js-如果问题无法解决，我们也会这样做.

这给了我一些开始写作的建议

我现在的代码是:

const Scheme1 = function (){
  const svg = useRef(null);
  const [isPanning, setIsPanning] = useState(false);
  const [cursorPos, setCursorPos] = useState({ x:0, y:0 });
  const [newSVGPos, setNewSVGPos] = useState({ x:0, y:0 });
  const [SVGViewbox, setSVGViewbox] = useState({ x:0, y:0, width:2472.3, height: 1467.24 });

  let startPanSVG = (e) => {
    setIsPanning(true);
    setCursorPos({ x:e.clientX, y:e.clientY });
  }

  let panSVG = (e) => {
    if(!isPanning) {
      return;
    }

    e.stopPropagation();
    e.preventDefault();
    let SVGDimensions = e.target.getBoundingClientRect();
    let ratio = SVGViewbox.width/SVGDimensions.width;
    let newX = SVGViewbox.x - ((e.clientX - cursorPos.x) * ratio);
    let newY = SVGViewbox.y - ((e.clientY - cursorPos.y) * ratio);
    setNewSVGPos({ x:newX, y:newY });
  }

  let stopPanSVG = () => {
    setIsPanning(false);
    setSVGViewbox({ ...SVGViewbox, x:newSVGPos.x, y:newSVGPos.y });
  }

  return (
    <svg ref={svg} viewBox={Object.values(SVGViewbox).join(" ")} onPointerDown={startPanSVG} onPointerMove={panSVG} onPointerLeave={stopPanSVG} onPointerUp={stopPanSVG} version="1.1" id="svg1003">
    ...
    </svg>
)}

主要的问题是SVG在平移过程中不会被鼠标拖动，只有在完成stopPanSVG次后才会执行相当苛刻的移动.可能是因为useState分别是异步和触发的，或者对重新渲染有限制？try 用useEffect替换它并不顺利——理想情况下，我希望它在startPanSVG内，所以它只在事件发生时触发，但这违反了钩子的规则.用钩子包装所述函数会导致e.clientX未定义，即使前缀为"？"s或跳过初始装载.

也许有更好的 Select ？应该补充一点，window/document/global由于项目设置而被禁用——例如，不能addEventListener.