Как выполнить функцию по размеру экрана javascript - PullRequest
Новая
       3

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

2 голосов
/ 22 марта 2020

Как выполнить функцию по размеру экрана javascript / bootstrap?

это div: <div className="col-sm hidden-md hidden-lg"></div>

и я хочу установить эту функцию (только на маленьком экране) : const [ navOpen, setNavOpen ] = useState(true)

код в reactjs, как я могу вызвать функцию, когда экран маленький?

Ответы [ 3 ]

1 голос
/ 22 марта 2020

Я подозреваю, что вам будет намного лучше с useEffect, построенным на Window.matchMedia , чем чем-то, использующим innerWidth. Это JavaScript эквивалент css медиазапросов. Таким образом, вы используете что-то управляемое событиями.

Примерно так: 

const [ navOpen, setNavOpen ] = useState(true)

useEffect(() => {
  const x = window.matchMedia("(max-width: 700px)")
  function myFunction(e) {
    setNavOpen(false);
  };
  x.addListener(myFunction)
  return () => x.removeListener(myFunction);
}, []);

Примечание: поскольку у него есть прослушиватель событий, обратите внимание, что для удаления прослушивателя возвращается функция очистки.

credit: я скопировал часть своего кода из w3schools

Редактировать: добавить пустой массив зависимостей по рекомендации @ agus-zubiaga

0 голосов
/ 22 марта 2020

Вы можете использовать window.innerHeight для расчета значения по умолчанию useState: 

const [ navOpen, setNavOpen ] = useState(window.innerWidth > 320)

Однако, если навигационная система должна открываться и закрываться автоматически при изменении размера экрана. Вы можете использовать Window.matchMedia () , который позволяет вам реагировать на размеры экрана.

Если это одноразовый, вы можете использовать его непосредственно в useEffect хуке, как в Ответ David784 .

В моем случае, так как я работаю над большое приложение со многими компонентами, которые должны реагировать на размер экрана, я использую библиотеку под названием реагировать . Это упрощает медиазапросы в React.

0 голосов
/ 22 марта 2020

Вы можете проверить ширину и высоту windows в useEffect и установить, например, навигацию открытой или закрытой. 

useEffect({
    const width = windows.innerWidth;
    const height = windows.innerHeight;
    if(height <= 720 && width <= 420){
      setNavOpen(true)
    }
  }, [])
...