小编Ste*_*tef的帖子

我正在用React JS建立一个照相馆。显然，它必须具有响应性，我已经通过在组件的render方法中设置如下值来解决了这个问题：

let thumbWidth = window.innerWidth >= 480 ? 75 : 100;

问题是我需要在调整窗口大小时更改const值。我的第一个尝试是构建一个像这样的函数并将其绑定到构造函数中：

getThumbWidth = (vpWidth) => {
    if(vpWidth >= 480 ) {
        this.setState({thumbSize: 120}); 
     } else {
        this.setState({thumbSize: 50}); 
     }
}

这在设置变量的初始值方面起作用，但是当窗口调整大小时如何触发函数？

尝试添加调整大小功能：

resize = () => this.getThumbWidth()

...然后更改getThumbWidth，以便它设置组件状态中的值-这样的想法是，当状态更新时，组件会自动重新渲染：

getThumbWidth = (vpWidth) => {
    if(vpWidth >= 480 ) {
        this.setState({thumbSize: 120}); 
     } else {
        this.setState({thumbSize: 50}); 
     }
}

然后按照其他几种解决方案中的建议，通过生命周期方法调用它，但是事件监听器似乎没有触发：

componentDidMount() {
    window.addEventListener('resize', this.resize)
}

componentWillUnmount() {
    window.removeEventListener('resize', this.resize)
}  

仍然无法运作...任何想法？