Как изменить визуализацию при смене реферов - PullRequest
Новая
       24

Как изменить визуализацию при смене реферов

4 голосов
/ 05 января 2020

Код: 

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

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

Я хочу загрузить данные, когда drawControl не равно нулю. Я проверяю документ, который может использовать обратный вызов ref.

Итак, как мне прослушать drawControl изменения и загрузить данные?

Ответы [ 3 ]

4 голосов
/ 06 января 2020

Если вы хотите запустить повторную визуализацию после изменения ссылки, вы должны использовать useState вместо useRef. Только так вы можете гарантировать, что компонент будет повторно визуализирован. Например: 

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

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

Как описано в документации useRef :

Имейте в виду, что useRef не уведомляет вас когда его содержание меняется. Отключение свойства .current не вызывает повторного рендеринга. Если вы хотите запустить некоторый код, когда React присоединяет или отсоединяет ссылку на узел DOM, вы можете вместо этого использовать обратный вызов ref .

Иногда может быть лучше сохраните любое значение, которое вы получаете от узла DOM, как предложено здесь , вместо сохранения самого узла.

2 голосов
/ 06 января 2020

useCallback может прослушать ссылку, измененную 

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

    return(
      <DrawControl ref={drawControlRef }/>
    )
}
0 голосов
/ 24 января 2020

Вы можете использовать функцию обратного вызова, которая useEffect основана на изменении useRef

   function useEffectOnce(cb) {

        const didRun = useRef(false);
        useEffect(() => {
            if(!didRun.current) {
                cb();
                didRun.current = true
            }
        })
    }
...