javascript - 裁判变更时如何重新呈现

码:

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

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

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

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

最佳答案

如果要在ref更改后触发重新渲染，则必须使用useState而不是useRef。只有这样，您才能确保组件将重新呈现。例如。:

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

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

如useRef文档所述:



如建议的here所示，有时最好存储从DOM节点获得的任何值，而不是存储节点本身。