我的React组件HTML代码的Next.js部分在编译和运行时处于错误的位置

Question

我不知道如何解释它，所以我将主要提供图像，并从检查器粘贴html。但基本上，我的HTML代码中有两个完全独立的部分，它们被花括号和条件分隔开。出于某种原因，当运行web应用程序时，只有在重新加载后的第一次，分开的两个元素才会合并。我的意思是一个元素包含了另一个元素的子元素。这绝对不应该是这种情况，我补充说。日志来验证应该显示正确的项目，即使它说正在显示项目A，它也显示了项目B，并向其添加了项目A的元素。我非常非常非常困惑，你可能也很困惑，所以我就把代码留在这里了。

这是我的代码，它的导航组件与侧边栏，总是可见的桌面，但在移动设备上，你有一个导航栏与菜单图标，当菜单图标被点击侧边栏展开并推动内容。

import React, { useState } from "react";
import { useMediaQuery } from "react-responsive";
import {
BellIcon,
ChatAlt2Icon,
CogIcon,
MenuIcon,
} from "@heroicons/react/outline";
export const Sidebar: React.FC = ({ children }) => {
const [isOpen, setOpen] = useState(false);
const isLarge = useMediaQuery({ query: "(min-width: 768px)" });
console.log(isLarge);
return (
<div className={"flex flex-row w-screen h-screen"}>
{/* Sidebar starts */}
{(isOpen || isLarge) && (
<div
id="sidebar"
className={"relative w-64 bg-gray-800 h-screen"}
>
<div className="flex flex-col justify-between">
<div className="px-8">
<ul className="mt-12"></ul>
</div>
<div
className="px-8 border-t border-gray-700"
id="bottom-bar"
>
<ul className="w-full flex items-center justify-between bg-gray-800">
<li className="cursor-pointer text-white pt-5 pb-3">
<BellIcon
className="icon icon-tabler icon-tabler-bell"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
></BellIcon>
</li>
<li className="cursor-pointer text-white pt-5 pb-3">
<ChatAlt2Icon
className="icon icon-tabler icon-tabler-bell"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
></ChatAlt2Icon>
</li>
<li className="cursor-pointer text-white pt-5 pb-3">
<CogIcon
className="icon icon-tabler icon-tabler-bell"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
></CogIcon>
</li>
</ul>
</div>
</div>
</div>
)}
{/* Sidebar ends */}
<div className="flex flex-col w-full h-full">
{/* mobile navbar starts */}
{!isLarge && (
<div
id="mobile-nav"
className="flex h-16 w-full relative bg-gray-800 flex-row items-center p-3"
>
<div className="cursor-pointer text-white pt-5 pb-3">
<MenuIcon
className={"icon icon-tabler icon-tabler-bell"}
width={30}
height={30}
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
onClick={() => {
setOpen(!isOpen);
console.log(isOpen);
}}
></MenuIcon>
</div>
</div>
)}
{/* mobile navbar ends */}
<div className="flex w-full h-full rounded relative">
{children}
</div>
</div>
</div>
);
};

现在这是正在发生的事情，从视频中你可以看到，在新鲜加载，它清楚地说，在id，它实际上是移动导航不应该是可见的(我可以确认它不应该与日志声明)。但是由于某些原因，导航栏显示出来了，最奇怪的是，它也有侧边栏的元素!移动导航栏只有一个菜单图标，但是在重新加载时，它有来自侧边栏的所有元素?这里到底发生了什么，为什么它们被组合在一起，为什么侧边栏不是只有在大屏幕时才显示?控制台。日志显示侧边栏正在显示，但事实并非如此。

这是新的重载代码

这是在切换到移动和返回(这是它应该如何从一开始)

移动端工作正常，桌面端在调整屏幕大小并返回全屏后工作正常，但桌面端在重新加载时无法正常工作

Answer 1

由于第一次加载是服务器端渲染，useMediaQuery将是未定义的，而它不是在调整屏幕大小。
将next/dynamic和SSR false加载到组件中应该可以解决这个问题。

import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(
() => import('../components/hello3'),
{ ssr: false }
)

我不确定SEO，但如果你想改善用户体验，你可以显示一个加载器，直到你确定是否桌面，我也不知道为什么你使用useMediaQuery而不是css媒体查询。