Question

我正在用react js构建照片库，并且必须根据视口的宽度更改各种值（缩略图大小，图像大小）。需要更改的值是应用程序中各种计算的基础，因此不能简单地放在样式表中。不希望陷入事物的内部工作，我在render方法中设置了初始值，如下所示：

    // 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（或其他任意值））为基准。

到目前为止，我尝试过的方法可能反映了我对js做出反应的相对新颖性，我在组件的开头添加了以下内容：

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

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

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

我看过诸如contra / react-respond之类的节点程序包，但这些程序包似乎与将jsx包含在媒体查询中有关，这不能解决问题。我只是在做一件非常愚蠢的事情，还是要解决这个棘手的问题？

Answer 1

const是块范围的，因此在if内声明它不会使其在if块外可用。您可以在更高的范围内声明let thumbWidth，也可以只使用ternary expression：

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

根据视口宽度设置初始const react js

1 个答案: