在 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>
  );
}