"window.innerWidth < 768“在Next.js中的帧运动

Question

我想控制动画(Framer )何时可以使用window.innerWidth运行，但是在Next.js中我得到了以下错误消息：

ReferenceError: window is not defined

这是我的组件ValuesSection.jsx的简化版本：

import React, { useEffect } from "react";
import { useInView } from "react-intersection-observer";
import { motion, useAnimation } from "framer-motion";

export default function ValuesSection() {
  const controls = useAnimation();
  const [ref, inView] = useInView();
  const MobileView = {};
  const isMobile = window.innerWidth < 768;
  if (!isMobile) {
    MobileView = {
      visible: { y: 0, scale: 1 },
      hidden: { y: 250, scale: 0 },
    };
  }

  useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
  }, [controls, inView]);

  return (
<>
 <motion.div
  key={value.name}
  ref={ref}
  animate={controls}
  initial="hidden"
  variants={MobileView}
 >Some content</motion.div>
</>

你能帮我理解我做错了什么吗？如果你能提供给我一个工作的例子，这将是伟大的和感激的。

Answer 1

在next.js项目中使用屏幕大小的最好方法是，当屏幕宽度大于或小于定义值时，可以使用来自materiial ui的Hook表示真或假，在我看来，它比window更好，因为它有很多选项，您可以在这里使用，这是您应该一步一步地做的事情

如果您还没有安装资料ui，请先安装

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

然后在组件内部导入并定义它。

import { useMediaQuery } from "@material-ui/core";


export default function ValuesSection() {

const IsTabletOrPhone = useMediaQuery("(max-width:1024px)");

如果屏幕大小大于1024px，则返回false，否则返回true。

所以你可以用它

  if (!IsTabletOrPhone) {
    MobileView = {
      visible: { y: 0, scale: 1 },
      hidden: { y: 250, scale: 0 },
    };
  }

更新：

也许是因为我给它分配了一个大写字母，您可以尝试用小写将名称更改为isTabletOrPhone，如果不起作用，尝试将其改为let

let isTabletOrPhone = useMediaQuery("(max-width:1024px)");

Answer 2

在Next.js中，页面是在服务器上预先录制的。在服务器上没有窗口。您可以先检查窗口是否存在，然后再访问它。

const isMobile = global.window && window.innerWidth < 768;

请注意，用户可以旋转电话或调整窗口大小，因此您应该将调整尺寸事件处理程序添加(并清理)到useEffect中。