Question

我试图在我的React应用程序中使用SSR，并且我正在努力使用window，因为window仅在客户端可用。因此，我尝试了以下方法。

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;

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

1 个答案: