无法在具有服务器端呈现(SSR)的React.js中使用窗口

Question

我正在尝试在我的React应用程序中使用SSR，而我正在努力使用window，因为它只在客户端可用。正因为如此，我尝试了下面的方法。

if (typeof window === "undefined" ? {} : window.innerWidth >= 768) {
  windowScrollTop =
    typeof window === "undefined" ? {} : window.pageYOffset / 3;
  } else {
    windowScrollTop = 0;
}

通过这样做，它是有效的，但每次访问每个页面时屏幕都会闪烁。我认为这是因为服务器端是被访问的，而window从typeof window === "undefined" ? {} : ...中被分配为空。当客户端被访问时，window可用。我想这就是屏幕闪烁的原因。

有没有办法解决这个问题？我已经在一个测试服务器上用一些示例代码托管了这个网站。有人知道如何处理window问题吗？

Answer 1

我有一个SSR应用程序，并检查服务器或客户端是否像这样呈现。然而，我不确定这是否是最好的做法，但它对我来说已经足够了。

import React, { Component } from "react";
import SomeImportedComponent from "../SomeImportedComponent";

// Check if server or client is rendering
const hasWindow = (typeof window !== 'undefined') ? true : false;

class MyComponent extends Component {
    render() {
        return (
            const options = {
                innerWidth: hasWindow ? window.innerWidth : null,
                pageYOffset: hasWindow ? window.pageYOffset : null,
            }
            return(
                <SomeImportedComponent {...options} />
            )
        );
    }
}

export default MyComponent;