MatchMedia не работает при ресайзе окна браузера?

Question

[Azat S.]

Если изменить размер окна браузера и обновить страницу, всё работает, а listener при изменении размеров окна, не срабатывает.

codepen.io/azat-io/pen/oxogRJ

Answer 1

[Денис]

Короткий абстрактный пример

var mediaQuery = window.matchMedia("screen and (min-width: 855px)");
mediaQuery.addListener(myFunc);

function myFunc(mq) {
    if (mq.matches) {
    	document.body.style.backgroundColor = '#060';
    } else {
		document.body.style.backgroundColor = '#900';
    }
}
myFunc(mediaQuery);

Comments

[Azat S.]

Только с изменением значений переменных listener не срабатывает: codepen.io/azat-io/pen/oxogRJ?editors=0010

[Денис]

Azat S. у вас переменная tabData не видна за пределами функции. Вынесение её в глобальную область видимости, я думаю, что не даст нужно результата. С ReactJS практически не знаком, но после изменения значения переменной tabData, нужно заново рендерить элементы. Как это делать в ReactJS - вам должно быть лучше известно, чем мне.