如何解决字符串插值不适用于 nextjs react
const Layout: React.FC<LayoutProps> = ({ children }) => {
const darkMode = useRecoilValue(darkModeAtom)
console.log('darkMode: ',darkMode)
return (
<div className={`max-w-6xl mx-auto my-2 ${darkMode ? 'dark' : ''}`}>
<Nav />
{children}
<style jsx global>{`
body {
background-color: ${darkMode ? '#12232e' : '#eefbfb'};
}
`}</style>
</div>
)
}
我使用 recoil-persist 后坐力。 那么,当darkMode 值为true 时,className 应该包含一个dark 类,对吗?但事实并非如此。我不知道这里出了什么问题。但是当我第一次刷新时它不起作用,之后它工作正常。我也尝试过使用 darkMode === true 条件,但它仍然不起作用。您会看到样式化的 jsx,效果很好。这随 darkMode 值而变化,当我刷新时,它会保留数据。但是当我检查时,我没有在第一个 div 中看到暗类。另外,当我 console.log 的 darkMode 值时,我看到 true,但不包括黑暗类。
也许这是一个愚蠢的错误,但我在这上面浪费了很多时间。那么我在这里做错了什么?
解决方法
问题是在 SSR(服务器端渲染)期间没有可用的 localStorage
/Storage
对象。因此来自服务器的结果 html 始终将 darkMode
设置为 false
。这就是为什么您可以在补水步骤中看到 cosole 不匹配标记错误的原因。
我假设在初始渲染(在水化步骤期间)使用一些始终为 false
的状态来匹配 SSR 的 html,但稍后将使用实际的 darkMode
值。类似的东西:
// themeStates.ts
import * as React from "react";
import { atom,useRecoilState } from "recoil";
import { recoilPersist } from "recoil-persist";
const { persistAtom } = recoilPersist();
export const darkModeAtom = atom<boolean>({
key: "darkMode",default: false,effects_UNSTABLE: [persistAtom]
});
export function useDarkMode() {
const [isInitial,setIsInitial] = React.useState(true);
const [darkModeStored,setDarkModeStored] = useRecoilState(darkModeAtom);
React.useEffect(() => {
setIsInitial(false);
},[]);
return [
isInitial === true ? false : darkModeStored,setDarkModeStored
] as const;
}
内部组件像这样使用它:
// Layout.tsx
const [darkMode] = useDarkMode();
// Nav.tsx
const [darkMode,setDarkMode] = useDarkMode();
,
对于登陆此页面的任何人,我刚刚发现了一个很棒的库,名为 next-themes
它非常好且轻巧(1.5kb)。试试看。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。