Javascript 根据视口宽度设置初始常量

我正在react 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
        } 
    }

我想做的是，如果vp大小更大，则将thumbWidth值变大，并将其设置为75，例如480px（或其他任意值）

到目前为止，我尝试的方法可能反映了我对react js的相对新颖性，我在组件的开头包括以下内容：

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

不幸的是，这样做意味着react在随后使用时会将“thumbWidth”标记为未定义

如果我将它包含在componentDidMount或render方法本身中，也会发生同样的情况

我已经看过了节点包，比如conta/react-responsive，但它们似乎是关于在媒体查询中封装jsx，这并不能解决问题。

---

我只是在做一些非常愚蠢的事情，还是这是一个很难解决的问题？

const

是阻塞范围，因此在

if

中声明它不会使它在

if

块之外可用。您可以在更高的范围内声明

let thumbWidth

，或者只使用：

---

const有一个块作用域，这意味着它只在if{}块中可用。如果您想在块外使用它，您需要在前面使用let来定义它。正如Gerard提到的，let和const都有块作用域，如果它们是在If块内为eg定义的，那么它们在If或elseThanks:-）之外不可用，作为一个加法，如果我想在调整窗口大小时将其更改为相关值，那么该方法是什么？或者我应该把它作为一个单独的问题包括进来吗？虽然它与你原来的问题密切相关，但问题是完全不同的，所以我建议你提出另一个问题，是的；）

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