Question

我正试图利用13.4.7的卫星数据,并使用<条码>下使用Media Query,以发现这种观点是否具有流动性。我的构成部分不是服务器构成部分,但我保留<代码>只读。 h 错误。现在,我的客户部分是服务器组成部分的一部分,但从文件来看,似乎允许这样做。我失踪了吗? 如下:

"use client";

import { useContext, useState, useEffect } from "react";
import PageDataContext from "@/contexts/PageDataContext";
import useMediaQuery from "@/hooks/useMediaQuery";
import { motion } from "framer-motion";

export default function Header() {
  const content = useContext(PageDataContext);
  const isSmallDevice = useMediaQuery("only screen and (max-width : 991px)");
  const [hideNav, setHideNav] = useState(isSmallDevice);
  const { home: homeContent } = content;
  const { navigation: navigationContent } = content;
  const { name } = homeContent;
  const [firstName, lastName] = name.split(" ");

  const onTheRight = { x: "100%" };
  const inTheCenter = { x: 0 };
  const onTheLeft = { x: "-100%" };

  const transition = { duration: 0.6, ease: "easeInOut" };

  const variants = {
    open: { opacity: 1, x: "0%" },
    closed: { opacity: 0, x: "100%" },
  };
  const toggleSideNav = () => {
    setHideNav(!hideNav);
  };

  useEffect(() => {
    setHideNav(isSmallDevice);
  }, [isSmallDevice]);

  return (
    <header id="site_header" className="header">
      <div className="header-content clearfix">
        <div className="text-logo">
          <a href="/">
            <div className="logo-symbol">{firstName[0].toUpperCase()}</div>
            <div className="logo-text">
              {firstName} <span>{lastName}</span>
            </div>
          </a>
        </div>
        <motion.div
          animate={hideNav ? "closed" : "open"}
          variants={variants}
          style={{
            position: "fixed",
            width: "100%",
            height: "calc(100% - 52px)",
            top: "52px",
            left: "auto",
          }}
        >
          <div className="site-nav">
            <ul className="leven-classic-menu site-main-menu">
              {navigationContent.map((item, idx) => (
                <li className="menu-item" key={"header_key_" + idx}>
                  <a href={item.url}>{item.title}</a>
                </li>
              ))}
            </ul>
          </div>
        </motion.div>
        <a className="menu-toggle mobile-visible" onClick={toggleSideNav}>
          <i className="fa fa-bars"></i>
        </a>
      </div>
    </header>
  );
}

Answer 1

我遇到了同样的问题。这是因为使用MediaQuery使服务器和客户都能够使用。即使你下达了“用户”指令,如果该指令在炉.中做了一些工作,也会出现这一错误。

作为一种解决办法,你可以形成一种习俗 h,并以动态进口加以利用:

http://www.ohchr.org。

 "use client";
import useMediaQuery from "@/hooks/useMediaQuery";

const useDevice = () => {
  const isMobile = useMediaQuery("only screen and (max-width : 767px)");
  const isTablet = useMediaQuery(
    "only screen and (min-width : 768px) and (max-width : 1024px)"
  );
  const isDesktop = useMediaQuery(
    "only screen and (min-width : 1025px) and (max-width : 2379px)"
  );
  const isDesktopLarge = useMediaQuery("only screen and (min-width : 2380px)");

  return { isMobile, isTablet, isDesktop, isDesktopLarge };
};

export default useDevice;

usage:

"use client";
const useDevice = dynamic(() => import("@/app/hooks/useDevice"), {
  ssr: false
});


export default function Header() {
  const device = useDevice();
  console.log(device?.isDesktop)

  ...

}

Answer 2

建议把你的客户部分与你的服务器部分分开。

否则,一个网页是服务器的组成部分。

根据我在守则中看到的内容,你选择了<代码>用户”,但最好设立一个包括该守则在内的单独组成部分。

顺便提一下,问题就在您的<条码>上。我看不到这部法典,但我认为它不友好。

Here is an implementation of the useMediaQuery hook:

import { useState } from  react 
import { useIsomorphicLayoutEffect } from  usehooks-ts 

type UseMediaQueryOptions = {
  defaultValue?: boolean
  initializeWithValue?: boolean
}

const IS_SERVER = typeof window ===  undefined ;

export function useMediaQuery(
  query: string,
  {
    defaultValue = false,
    initializeWithValue = true,
  }: UseMediaQueryOptions = {},
): boolean {
  const getMatches = (query: string): boolean => {
    if (IS_SERVER) {
      return defaultValue
    }
    return window.matchMedia(query).matches
  }

  const [matches, setMatches] = useState<boolean>(() => {
    if (initializeWithValue) {
      return getMatches(query)
    }
    return defaultValue
  })

  function handleChange() {
    setMatches(getMatches(query))
  }

  useIsomorphicLayoutEffect(() => {
    const matchMedia = window.matchMedia(query)

    handleChange()

    if (matchMedia.addListener) {
      matchMedia.addListener(handleChange)
    } else {
      matchMedia.addEventListener( change , handleChange)
    }

    return () => {
      if (matchMedia.removeListener) {
        matchMedia.removeListener(handleChange)
      } else {
        matchMedia.removeEventListener( change , handleChange)
      }
    }
  }, [query])

  return matches
}

http://usehooks-ts.com/react-hook/use-media-query”rel=“nofollow noreferer” https://usehooks-ts.com/react-hook/use-media-query。

h不会留下任何错误。

<>:你不需要使用动态进口来使用hoo。您仅需要避免使用<条码> 窗口<>/代码>或<条码>。在此之前,用户会收到。

友情链接