如何在 refs 更改时重新渲染

Question

代码：

import DrawControl from "react-mapbox-gl-draw";

export default function MapboxGLMap() {
    let drawControl = null
    return(
      <DrawControl ref={DrawControl => {drawControl = DrawControl}}/>
    )
}

我想在drawControl非空时加载数据。我检查了可能使用回调引用的文档。

那么，我如何监听drawControl更改并加载数据？

Answer 1

如果要在 ref 更改后触发重新渲染，则必须使用useState代替useRef。只有这样才能确保组件会重新渲染。例如：

function Component() {
  const [ref, setRef] = useState();

  return <div ref={newRef => setRef(newRef)} />
}

如useRef文档中所述：

请记住，当其内容更改时useRef 不会通知您。改变.current属性不会导致重新渲染。如果您想在 React 将 ref 附加或分离到 DOM 节点时运行一些代码，您可能需要改用回调 ref。

有时可能更好地存储任何值，你从DOM节点获得，如建议在这里，而不是存储节点本身。

Answer 2

useCallback 可以监听 ref 更改

export default function MapboxGLMap() {
    const drawControlRef = useCallback(node => {
      if (node !== null) {
        //fetch(...)   load data
      }
    },[]);

    return(
      <DrawControl ref={drawControlRef }/>
    )
}