Question

我有一个服务器端渲染react应用程序（因为我也需要Facebook Seo）。

我的应用程序的一部分需要获取window.innerWidth。

我已经搜索了很长时间，大多数人说您无法在服务器端找到窗口，因此您也需要在客户端进行渲染。

我不确定如何工作，我有componentdidmount，但我的windowWidth永远是0。

服务器渲染后，我们的bundle.js将启动，客户端的窗口将正常工作吗？为什么仍然是0？

state = {
      windowWidth: 0
}
    handleResize(){
        this.setState({windowWidth: window.innerWidth});
    }

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

    componentWillUnmount () {
     window.removeEventListener('resize', this.handleResize);

    }

render() {
return (<div>{this.state.windowWidth}</div>)
}

Answer 1

问题是您附加了将新宽度设置为“调整大小”侦听器的功能，这意味着仅当调整屏幕大小时，新宽度才会添加到状态。您需要在update table SET [date] = SUBSTRING(@String,26,4)+'-10-'+SUBSTRING(@String,9,11) WHERE [date] like '%Oct%'内设置宽度，然后在安装时将其宽度设置为正确。

sandbox

代码：

componentDidMount

反应服务器端渲染-addEventListener

1 个答案: