Использование триггера Эффект при изменении размера экрана

Question

У меня есть следующие useEffect

useEffect(() => {
  Draggable.create(sliderRef.current, {
    type: "x",
    bounds: {
      minX: 0,
      maxX: -document.getElementById('slider').offsetWidth + window.innerWidth
    }
  });
}, [document.getElementById('slider')])

Я хочу активировать его при изменении размера экрана. Я пытался передать параметр в массиве зависимостей.

window.innerWidth или document.getElementById('root')

Однако безуспешно ... Я ценю помощь

javascript reactjs

1

Ruan Duarte 11 Фев 2021 в 08:09

Answer 1

У useEffect должна быть зависимость, которая изменяется, если вы хотите, чтобы она повторно вызывала ваш обратный вызов, поэтому простой document.getElementById не поможет.

Лично я рекомендую использовать [ResizeObserver][1], который уже оптимизирован для такого типа событий,


const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // ... entry has the full info about your element dimensions
     
  }
 
});

resizeObserver.observe(document.getElementById('slider'));

В приложении React я бы использовал useEffect для запуска и остановки наблюдения за размером элемента.

function App(){

  useEffect(() => {

    // start listening on app start
    resizeObserver.observe(document.getElementById('slider'));

    return () => {
          // clean 
          resizeObserver.unobserve(document.getElementById('slider'));
    }
  }, []);

}

2

Louay Alosh 11 Фев 2021 в 05:18

Answer 2

Вы пытаетесь использовать императивный код DOM внутри жизненного цикла React - вы не можете (по крайней мере, не так).

Зависимости useEffect могут зависеть только от переменных, которые отслеживает React: состояние и свойства. React не может знать, когда изменится document.getElementById('slider'). Он не знает, что это такое и как это проверить. Код проверки изменений зависимостей не запускается в цикле, постоянно проверяя переменные. Он запускается только при изменении state или props этого компонента. Если они не изменятся, React не будет проверять зависимости и не узнает, что они изменились.

Вы должны управлять любым кодом, который должен отслеживать изменения окна, необходим для запуска старого ванильного JS-способа.

0

Codebling 11 Фев 2021 в 05:17

Использование триггера Эффект при изменении размера экрана

2 ответа

Похожие вопросы

Новые вопросы

javascript