当引用改变时如何重新渲染

Code:

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

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

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

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

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

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

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

如下所述useRef https://reactjs.org/docs/hooks-reference.html#useref文档：

请记住useRef doesn’t当其内容发生变化时通知您。变异.current属性不会导致重新渲染。如果你想在 React 附加或分离 DOM 节点的引用时运行一些代码，你可能需要使用回调参考 https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node反而。

有时，按照建议存储从 DOM 节点获取的任何值可能会更好here https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node，而不是存储节点本身。