时间戳

首页 > 解决方案 > 无法在 React.js 中使用带有服务器端渲染 (SSR) 的窗口

reactjs - 无法在 React.js 中使用带有服务器端渲染 (SSR) 的窗口

问题描述

我正在尝试将 SSR 与我的 React 应用程序一起使用，但我正在努力使用 window，因为它仅在客户端可用。因此，我尝试了以下方法。

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

通过这样做，它可以工作，但是每次访问每个页面时屏幕都会闪烁。我认为这是因为服务器端被访问，并且窗口被分配为空typeof window === "undefined" ? {} : ...，。访问客户端时，窗口可用。我猜这就是屏幕闪烁的原因。

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

标签： reactjsserver-side-rendering

解决方案

我有一个 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;

推荐阅读