javascript - 根据视口宽度设置初始常量反应js

Question

我正在用 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 大小更大，并且它的基础在 75 以下，例如 480px（或其他任意值），则使 thumbWidth 值更大。

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

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

不幸的是，这样做意味着 react 将 'thumbWidth' 标记为未定义，无论随后使用它。

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

我查看了节点包，例如 contra/react-responsive，但这些似乎是关于将 jsx 包含在媒体查询中，这并不能解决问题。我只是在做一些非常愚蠢的事情还是很难解决？

标签： javascriptcssreactjsresponsive-designmedia-queries

Answer 1

const是块作用域，因此在 a 内声明它if不会使其在if块外可用。您可以let thumbWidth在更高的范围内声明，也可以只使用三元表达式：

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