Javascript 如何从React中的不同文件检索状态

下面有3个文件：

Toggle.jsx

、

PersistentState.jsx

和

Particles.jsx

我正在创建的站点有一个主题切换。按下该开关时，页面将在暗模式和亮模式之间切换。我使用一个自定义钩子（

PersistentState.jsx

）来存储状态，以便页面的主题在页面重新加载时保持不变（useState（）不会保持不变，因此我使用自定义钩子）

这就是我如何设置

usePersistentState

：

const[isDark，setIsDark]=usePersistentState（'theme'，true）；

isDark

将根据是否选中切换而更改<代码>设置标记在切换的onChange事件中更改

我试图访问另一个文件

Particles.jsx

中的值

isDark

。我不确定如何访问它，因为我不能直接导入它。这就是我需要帮助的地方

---

文件夹

Toggle.jsx

import React，{Component，useffect}来自“React”；
从“/../hooks”导入{usePersistentState}；
常量主题=（）=>{
const[isDark，setIsDark]=usePersistentState（'theme'，true）；//默认为暗模式
useffect（（）=>{
isDark？document.documentElement.classList.add（'other'）：document.documentElement.classList.remove（'other'））
});
返回(
setIsDark（event.target.checked）}/>
)
}
类切换扩展组件{
render（）{
返回(
);
}
}
导出默认切换；

PersistentState.jsx

从“React”导入React；
导出默认函数usePersistentState（键，defaultValue）{
const[state，setState]=React.useState（（）=>{
const persistentState=localStorage.getItem（键）；
返回persistentState？JSON.parse（persistentState）：defaultValue；
});
React.useffect（（）=>{
setItem（key，JSON.stringify（state））；
}，[状态，键]；
返回[状态，设置状态]；
}

Particles.jsx

import React，{Component，useState}来自'React'；
从“react Particles js”导入{Particles as ReactParticles}；
常量参数=（）=>{
const[isdark，setIsDark]=useState（0）因为您的钩子不是一个，所以无论何时调用自定义钩子，状态都不会持久化——这意味着您每次都会得到新的值

因此，你需要使你的钩子成为一个单子

但如果您仔细想想，您可以使用上下文API创建一个单例：

// Wrap your application components
<ThemeContext.Provider value={{ isDark, setIsDark }}>...</ThemeContext.Provider>

// Change the hook implementation to use context
export default function usePersistentState(key, defaultValue) {
    const {isDark, setDark} = useContext(ThemeContext);

    React.useEffect(() => {
        ...
    }, [...]);
    return [isDark, setDark];
}

//包装应用程序组件
...
//将钩子实现更改为使用上下文
导出默认函数usePersistentState（键，defaultValue）{
const{isDark，setDark}=useContext（ThemeSecontext）；
React.useffect（（）=>{
...
}, [...]);
返回[isDark，setDark]；
}