Установить начальную константу в зависимости от ширины области просмотра. - PullRequest
Новая
       8

Установить начальную константу в зависимости от ширины области просмотра.

0 голосов
/ 27 августа 2018

Я строю фотогалерею в соответствии с js, и различные значения (размер миниатюры, размер изображения) должны меняться в зависимости от ширины области просмотра. Значения, которые необходимо изменить, являются основой различных вычислений в приложении, поэтому их нельзя просто поместить в таблицу стилей. Не желая увязать во внутренней работе, я установил начальные значения в моем методе рендеринга следующим образом: 

    // vars
    const thumbWidth = 75;
    const viewWindowWidth = thumbWidth * 5;
    const thumbContainerwidth = thumbWidth * 5;
    const thumbContainerHeight = 75;        

    let thumbContainerWidth = this.state.photos.length * thumbWidth; 
    let thumbContainerPos = this.state.thumbContainerPos;

    let dynamicStyles = {
        thumbContainerOuter : {
            width: thumbContainerwidth
        },
        thumbContainerInner : {
            left: thumbContainerPos
        } 
    }

Что я хочу сделать, так это увеличить значение thumbWidth, если размер vp больше, и сделать его основанием на 75 ниже, скажем, 480px (или другого произвольного значения).

Подход, который я до сих пор пробовал, вероятно, отражает мою относительную новизну реагировать на js, в начале компонента я включаю следующее: 

if(window.innerWidth >= 480 ) {
   const thumbWidth = 75;
} else {
   const thumbWidth = 100;
}

К сожалению, выполнение этого означает, что реакция помечает 'thumbWidth' как неопределенную, где бы она ни использовалась впоследствии.

То же самое происходит, если я включаю его в componentDidMount или в сам метод рендеринга.

Я смотрел на пакеты узлов, такие как «против / реагирующий», но, похоже, они заключают в себе включение jsx в медиа-запросы, что не решает проблему. Я просто делаю что-то действительно глупое или это сложно разобраться?

1 Ответ

0 голосов
/ 27 августа 2018

const является заблокированной областью действия, поэтому объявление ее внутри if не сделает ее доступной вне блока if.Вы можете объявить let thumbWidth в более высоком объеме или просто использовать троичное выражение : 

const thumbWidth = window.innerWidth >= 480 ? 75 : 100
...