时间戳

首页 > 解决方案 > 条件渲染组件，Next.js 样式在第一次加载时被破坏

css - 条件渲染组件，Next.js 样式在第一次加载时被破坏

问题描述

我正在使用 Ant Design 和自定义样式表。第一次加载样式被破坏，但是当我访问另一个页面并返回到损坏的页面时，现在看起来很好。所以问题只在第一次加载。它在开发服务器上，我已经清除了所有缓存。但仍然是同样的问题。

这是第一次加载后的截图

在此处输入图像描述

这是我从另一页回来后的正确样式

在此处输入图像描述

这是我如何渲染组件的代码：

<div>
  {jwToken || role === "restaurant_owner" ? (
    <Layout>
      <Index />
    </Layout>
  ) : (
    <div>
      <Login />
    </div>
  )}
</div>

标签： cssreactjsnext.jsantd

解决方案

我有一个类似的问题，我修复它的方法是添加一个mounted取决于条件的变量。所以看起来是这样的。

// Not sure how you pass the condition, I'm assuming hooks
const { condition } = someHook()

const [mounted, setMounted] = useState()

useEffect(() => {
   setMounted(true)
   return () => setMounted(false)
}, [condition]);

return (
   <div>
       {mounted && condition && <Component/>
   </div>
)

至于为什么会发生这种情况，我怀疑它与 SSR 有关（我在 Github 上发现了类似的问题，但对于 Material-UI），我的解决方案强制该条件仅在浏览器期间可用。

推荐阅读