className "page"需要修改为"页面浅色主题"或"页面深色主题"，切换本地存储键"主题颜色"，值为浅色主题和深色主题。
活动键值在本地存储中确实会更改，但更新仅在刷新页面时显示。我需要在切换时同步更改
要更改的页面
export default function Page({children}){
return(
<div className={`page ${localStorage.getItem('theme-color')}`}>
{/* <div className= "page"> */}
{children}
</div>
)
}
H3 内部文本需要根据本地存储中键"主题颜色"的活动值动态更改。我将变量"主题打开器"放在 h3 标签之间。不会发生任何更改
这是我的代码
export default function Body() {
let themeOpener;
if (`${localStorage.getItem('theme-color','light-theme')}`) {
themeOpener = " Ahh the light it burns! Please use toggle, I prefer dark mode!";
} else {
themeOpener = "I learnt to design in React and im hooked ";
}
return (
<div className="body">
{/* <h3 id="opener">I learnt to design in React and im hooked </h3> */}
<h3 id="opener">{themeOpener}</h3>
</div>
);
}
这是我在创建本地存储的切换中的代码
const ToggleMode = () => {
// state
const [isLight, setIsLight] = useState(false);
// effect
useEffect(() => {
// check local storage
const CurrentTheme = localStorage.getItem("theme-color");
if (CurrentTheme === "light-theme") {
setIsLight(true);
} else {
setIsLight(false);
}
console.log(useEffect);
}, []);
const ToggleChecked = () => {
// logic
if (isLight) {
localStorage.setItem("theme-color", "dark-theme");
setIsLight(false);
} else {
localStorage.setItem("theme-color", "light-theme");
setIsLight(true);
}
console.log(ToggleChecked);
};
return (
<div className="toggle--container">
<input
type={"checkbox"}
id="toggle"
className="toggle--checkbox"
checked={isLight}
onChange={ToggleChecked}
/>
<label htmlFor="toggle" className="toggle--label">
<span className="toggle--label-background"></span>
</label>
<div className=""></div>
</div>
);
};
export default ToggleMode;
是的，根据您的代码，这是很自然的。无论何时切换，ToggleMode组件将仅通过更改的状态值isLight重新呈现。
但是你的Body和Page应该是ToggleMode父级的组件不会被重新渲染。因为他们的props或states从未因ToggleChecked()而改变.
要使其正常工作，您需要执行一些操作以在Page和Body组件中重新渲染父项。
如何？您需要在这些组件中创建状态值，或者在顶级组件中创建IsLight和setIsLight。然后这两个将被钻入ToggleMode.
类似于以下内容。
export default function Page({children}){
// state
const [isLight, setIsLight] = useState(false);
return(
<div className={`page ${localStorage.getItem('theme-color')}`}>
{/* <div className= "page"> */}
<Body isLight={isLight} setIsLight={setIsLight} />
{children}
</div>
)
}
export default function Body({isLight, setIsLight}) {
return (
<div>
<ToggleMode isLight={isLight} setIsLight={setIsLight} />
</div>
);
}
export default function ToggleMode ({isLight, setIsLight}){
// This is not needed anymore.
// const [isLight, setIsLight] = useState(false);
return (<>Your toggle code...</>)
}
附言你不觉得这很烦人吗？为了避免道具钻孔，我们使用状态管理实用程序，如反应上下文API，或第三方库，如Redux。