Как при загрузке страницы менять стили?

Question

[Ольга]

При загрузке страницы в мобилке стили должны меняться, аналогично и при ресайзе. На ресайз код работает, но если загружаем сразу с мобильного, то нужные стили не применяются

static propTypes = {
		common: T.object.isRequired
	};

	constructor(...args) {
		super(...args);
		this.getLayout = ::this.getLayout;
		this.rafResize = ::this.rafResize;
		this.checkLayoutUpdates = ::this.checkLayoutUpdates;

		this.state = {
			isMobile: this.props.common.isMobile,
			layout: this.getLayout()
		};
	}

	componentDidMount() {
		this.checkLayoutUpdates();
		this.eventOptions = detectPassiveEvents.hasSupport === true ? {capture: false, passive: true} : false;
		window.addEventListener('resize', this.rafResize, this.eventOptions);
	}

	componentWillUnmount() {
		window.removeEventListener('resize', this.rafResize, this.eventOptions);
	}
	getLayout() {
		if (!__BROWSER__) {  // eslint-disable-line no-undef
			const {common} = this.props;
			return common.isMobile ? 'md' : common.isTablet ? 'vt' : 'dd';
		}
		const WW = document.documentElement.clientWidth || window.innerWidth;

		if (WW < 720) {
			return 'md';
		}

		if (WW < 990) {
			return 'vt';
		}

		if (WW < 1250) {
			return 'ht';
		}

		return 'dd';
	}

	checkLayoutUpdates() {
		const layout = this.getLayout();
		if (this.state.layout !== layout) {
			this.setState({layout, isMobile: layout === 'md', isTablet: layout === 'vt'});
		}
	}

	rafResize() {
		requestAnimationFrame(this.checkLayoutUpdates);
	}

        render() {
		const {layout, isMobile} = this.state;
		return (
			<OnVisible>
          {isMobile ? (<div className={styles.mobile_container}></div>) :(<div className={styles.event_container></div>}
            </OnVisible>

Comments

[Максим]

Ольга - ищите по шагам.
У вас есть код, в котором выполняется нужный вам setState. Отчего он зависит? От layout, как она взялась - выполнилась getLayout функция. Ок, что вернулось из getLayout функции? Корректно? Если да - то ошибка не в этом листинге кода, если нет - то далее: почему такое значение вернулось? А что в итоге в переменной WW и тд тп. Можете использовать debugger или console.log для "поисков".

[Ольга]

Максим, в layout и WW приходят корректные значения всегда. но при первичной загрузке страницы isMobile: false. Я не могу понять почему, если остальные переменные, от которых зависит isMobile корректные

[Максим]

Ольга, давайте смотреть далее: вы говорите при первичной загрузке. Значит, это this.props.common.isMobile
Ок, опять по шагам: откуда этот пропс пришел? от родителя. Кто родитель? Такой-то. Как он передает common и, и что там внутри?

p.s. Не знаю всей картины, но как вариант можете спастись используя подсчет и установку в стэйт layout внутри componentWillMount (то есть, в тот момент, когда компонент еще не отрисовался).

[Ольга]

Максим, componentWillMount не получается использовать, возникает ошибка window not define, так как внутри функции window.addEventListener('resize', this.rafResize, this.eventOptions);

[Максим]

Ольга, ок, логично. Что с родителем из которого приходят props?

[Ольга]

Максим,
common это reducer , внутри него есть такая штука как initialState
export const initialState = {
isMobile: false,
isTablet: false,
height: undefined,
menu: false,
scrollTop: 0
};
но его тоже нельзя менять

[Максим]

Ольга

Я не могу понять почему ... при первичной загрузке страницы isMobile: false.

разобрались почему false.

Теперь еще раз, в чем вопрос? Изначаль isMobile - false, ок. Далее у вас в момент componentDidMount в стейт пишется что-то (вероятно префикс), что я думаю влияет на стили. Далее вы в isMobile записываете значение 'md' или 'vt' и следовательно из-за этого всегда рисуется ваш div внутри OnVisible компонента. Откуда у вас styles - не ясно из этого куска тоже. Что вы ожидаете - тоже не понял.

[Антон Спирин]

Ольга, я вам рекомендую использовать react-container-query . Очень гибкая и удобная библиотека.
Тут пример использования: Правильно ли так отслеживать viewport?
Если решите оставить свой вариант, то используйте _.throttle для сокращения количества колбеков при ресайзе:

window.addEventListener('resize', __.throttle(this.rafResize, 300, this.eventOptions));

Немного о debounce и throttle: https://webdevkin.ru/posts/frontend/kak-ispolzovat...

Максим все правильно пишет, у вас изначально isMobile: false и выход из условия в checkLayoutUpdates без изменения стейта, так как:
this.state.layout === layout
или:
'md' === 'md'
как итог - state не обновляется и isMobile остается false.