时间戳

首页 > 解决方案 > 如何在 refs 更改时重新渲染

javascript - 如何在 refs 更改时重新渲染

问题描述

代码：

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

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

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

那么，如何监听drawControl变化并加载数据呢？

标签： javascriptreactjsref

解决方案

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

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

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

如useRef文档中所述：

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

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

推荐阅读