Как получить высоту области просмотра в ReactJS? В обычном JavaScript я использую
window.innerHeight()
но используя ReactJS, я не уверен, как получить эту информацию. Я понимаю, что
ReactDOM.findDomNode()
работает только для созданных компонентов. Однако это не относится к элементу document
or body
, который может дать мне высоту окна.
javascript
reactjs
window
viewport
Джабран Саид
источник
источник
.bind(this)
из аргументов обратного вызова, так как он уже связан конструктором.this.state = { width: 0, height: 0 };
таким, чтобы переменные состояния не меняли свои типы (если я правильно понимаю, window.innerWidth - целое число ). Ничего не меняет, кроме как облегчает понимание кода IMHO. Спасибо за ответ!this.state = { width: window.innerWidth, height: window.innerHeight };
начать?Использование крючков (React
16.8.0+
)Создать
useWindowDimensions
крючок.И после этого вы сможете использовать его в своих компонентах, как это
Рабочий пример
Оригинальный ответ
То же самое в React, вы можете использовать,
window.innerHeight
чтобы получить высоту текущего окна просмотра.Как вы можете видеть здесь
источник
cleanup
функцией, вы можете прочитать об этом здесьreq
, доступна ли эта опораgetInitialProps
. Если это так, он работает на сервере, то у вас не будет переменных окна.источник
height: window.innerHeight || props.height
. Это не только упростит код, но и удалит ненужные изменения состояния.componentWillMount
больше не рекомендуется, см. Reactionjs.org/docs/react-component.html#unsafe_componentwillmountЯ только что отредактировали QoP «s текущий ответ поддерживать SSR и использовать его с Next.js (React 16.8.0+):
/hooks/useWindowDimensions.js :
/yourComponent.js :
источник
Ответ @speckledcarp отличный, но он может быть утомительным, если вам нужна эта логика в нескольких компонентах. Вы можете изменить его как HOC (компонент более высокого порядка), чтобы облегчить повторное использование этой логики.
withWindowDimensions.jsx
Тогда в вашем основном компоненте:
Вы также можете «сложить» HOC, если у вас есть другой, который вам нужно использовать, например
withRouter(withWindowDimensions(MyComponent))
Edit: я бы пошел с React ловушкой в настоящее время ( пример выше здесь ), так как они решают некоторые сложные вопросы с HOCs и классами
источник
Я просто потратил некоторое серьезное время на выяснение некоторых вещей с помощью React и прокрутки событий / позиций - так что для тех, кто все еще смотрит, вот что я нашел:
Высота области просмотра может быть найдена с помощью window.innerHeight или с помощью document.documentElement.clientHeight. (Текущая высота окна просмотра)
Высоту всего документа (тела) можно узнать с помощью window.document.body.offsetHeight.
Если вы пытаетесь найти высоту документа и знаете, когда достигли дна - вот что я придумал:
(Моя панель навигации была 72px в фиксированной позиции, поэтому -72, чтобы получить лучший триггер события прокрутки)
Наконец, вот несколько команд прокрутки для console.log (), которые помогли мне разобраться в моей математике.
Уф! Надеюсь, это поможет кому-то!
источник
Ответы @speckledcarp и @Jamesl оба великолепны. В моем случае, однако, мне был нужен компонент, высота которого могла бы увеличить полную высоту окна, условно во время рендеринга ... но вызов HOC в пределах
render()
повторно рендерит все поддерево. BAAAD.Кроме того, я не интересовался получением значений в качестве реквизита, а просто хотел родителя,
div
который бы занимал всю высоту экрана (или ширину, или оба).Итак, я написал родительский компонент, обеспечивающий полную высоту (и / или ширину) div. Boom.
Вариант использования:
Вот этот компонент:
источник
источник
Вы также можете попробовать это:
источник