在React.js无法使用窗口服务器端渲染（SSR）

Question

我试图用SSR与我的应用程序做出反应，而我挣扎使用窗口，因为它仅适用于客户端可用。正因为如此，我试过下面。

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

通过这样做，它的工作，但屏幕闪烁访问的每个页面每次。我想这是因为服务器端进行访问，并且窗口从typeof window === "undefined" ? {} : ...分配空落落的。当客户端进行访问，窗口是可用的。我想这就是为什么屏幕上闪烁。

有没有办法解决这个问题的方法吗？我已经主持了测试服务器上的一些示例代码的网站。有谁知道如何处理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;