reactjs - 组件安装时 Ref.current 未定义，当我需要它时它不会导致重新渲染

Question

我想制作一个可拖动的 div，因此我创建了一个引用来访问该 div，以便我可以在 Rxjs fromEvent 运算符中使用它

问题是 ref 对象在 fromEvent 中使用它后将被设置(第一次 ref 尚未设置)，所以我将它放在 if 语句中，这样它只在设置时使用 ref。

现在，dragRef.current 已设置，但组件再也不会执行

这是我正在使用的代码:

import React, { useRef, useEffect, useState } from "react";
import "./App.css";
import { fromEvent } from "rxjs";
import { map } from "rxjs/operators";

const App: React.FC = () => {
    const dragRef = useRef<HTMLDivElement>(null);

    const mouseMove = fromEvent(document, "mousedown");

    if (dragRef.current != undefined) {
        debugger;
        const mouseDown = fromEvent(dragRef.current, "mousedown");
        const mouseUp = fromEvent(dragRef.current, "mouseup");
        const mouseDrag = mouseDown.pipe(
            map((evt: MouseEvent | Event) => {
                // let offsetX = evt.clientX - dragRef.current.offsetLeft;
                // let offsetY = evt.clientY - dragRef.current.offsetTop;
                console.log(evt);
                return evt;
            })
        );
        mouseDrag.subscribe(v => console.log(v));
    }

    return (
        <div className="App">
            <header className="App-header">
                <div className="drag" ref={dragRef}></div>
            </header>
        </div>
    );
};

export default App;

Answer 1

您可以使用useEffect hook ，它将您想要监视的变量数组作为依赖项。因此，在您的情况下，当您的引用发生变化时，您就会执行该函数。类似的东西

useEffect(() => {
if (dragRef.current != undefined) {
        debugger;
        const mouseDown = fromEvent(dragRef.current, "mousedown");
        const mouseUp = fromEvent(dragRef.current, "mouseup");
        const mouseDrag = mouseDown.pipe(
            map((evt: MouseEvent | Event) => {
                // let offsetX = evt.clientX - dragRef.current.offsetLeft;
                // let offsetY = evt.clientY - dragRef.current.offsetTop;
                console.log(evt);
                return evt;
            })
        );
        mouseDrag.subscribe(v => console.log(v));
    }
}, [dragRef])