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

Question

下面有三个文件：Toggle.jsx、PersistentState.jsx和Particles.jsx

我正在建设的一个网站有一个主题切换。按下该开关后，页面将在暗模式和亮模式之间切换。我使用自定义挂钩(PersistentState.jsx(来存储状态，以便页面的主题在页面重新加载时保持不变(useState((不保持不变，这就是我使用自定义钩子的原因(。

这就是我设置usePersistentState:的方式

const [isDark, setIsDark] = usePersistentState('theme', true);

isDark的更改取决于是否检查了切换。setIsDark在切换的onChange事件中发生更改。

我正在尝试访问另一个文件Particles.jsx中的值isDark。我不确定如何访问它，因为我不能直接导入它。这就是我需要帮助的地方。

---

文件

Toggle.jsx

import React, { Component, useEffect } from "react";
import { usePersistentState } from './../hooks';
const Theme = () => {
const [isDark, setIsDark] = usePersistentState('theme', true); // default to dark mode
useEffect(() => {
isDark ? document.documentElement.classList.add('other') : document.documentElement.classList.remove('other')
});
return (
<div>
<main>
<input id="toggle" name="toggle" type="checkbox" checked={isDark} onChange={event => setIsDark(event.target.checked)} />
<label htmlFor="toggle" className="switch" id="switch"></label>
</main>
</div>
)
}
class Toggle extends Component {
render() {
return (
<Theme />
);
}
}
export default Toggle;

PersistentState.jsx

import React from 'react';
export default function usePersistentState(key, defaultValue) {
const [state, setState] = React.useState(() => {
const persistentState = localStorage.getItem(key);
return persistentState ? JSON.parse(persistentState) : defaultValue;
});
React.useEffect(() => {
window.localStorage.setItem(key, JSON.stringify(state));
}, [state, key]);
return [state, setState];
}

Particles.jsx

import React, { Component, useState } from 'react';
import { Particles as ReactParticles } from 'react-particles-js';
const PARAMS = () => {
const [isdark, setIsDark] = useState(0) <- this does not work, how should I go about retrieving the value of isDark from Toggle.jsx
console.log(isdark, setIsDark)
return ({
"particles": {
"number": {
"value": 60,
},
"color": {
"value": `${isDark ? : ...}` <- where I need to use the value of isDark 
},
...
}
class Particles extends Component {
render() {
return (
<div className="particles">
<ReactParticles width='100vw' height="100vh" params={PARAMS()} />
</div>
)
}
}
export default Particles;

Answer 1

因为您的钩子不是单例，所以无论何时调用自定义钩子，状态都不会持久存在，这意味着您每次都会获得新值。

因此，您需要使您的钩子成为singleton。最简单的方法是使用像reusable这样的库并结束它。

但如果你仔细考虑一下，你可以用上下文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];
}