在 React 中，如何使用 Ref 获取 Element 属性的值？

Question

我想要做

function MyComponent () {

    const myRef = useRef(null)

    const myValue = useMemo(() => (myRef.current.someKey), [])

    return <div ref={myRef} />
}

但它不起作用，因为有时在设置 myValue 时 myRef 尚未加载（因此 myRef.current 为空），并且我不知道在加载完成后我应该如何重置 myValue。

Answer 1

function MyComponent() {
  const [myValue, setMyValue] = useState("Loading...");
  const myRef = useRef(null);

  useEffect(() => {
    setMyValue(myRef?.current.dataset.value);
  }, [myRef]);

  return (
    <div ref={myRef} data-value="foo">
      {myValue}
    </div>
  );
}