创建一个可以从 React 中的任何地方访问的变量

Question

我正在尝试在 React 中创建暗模式。为此，我需要一个可以访问的 "mega-variable" 从组件树上的任何地方看起来像：

let darkMode = false

当它被切换时，在选定的组件中我将拥有能够写出类似的东西：

<button>{darkMode ? "Light Mode" : "Dark Mode"}</button>

我尝试用 MobX 来做，但没有成功。它不会像在状态更改中那样重新呈现。我能做什么？

Answer 1

我会为此使用 redux。

它允许您在全局级别创建状态并与之交互。

Answer 2

小心global variables。实际上考虑到 React 的流程，甚至很难实现（也许使用 window 对象？）。你想要的可以使用 Context API 完成。这是通过组件传递 props 的分离方式。通过用 Provider 包装应用程序的最高级别，您可以从任何地方（在同一棵树内）访问它：

const {Provider, Consumer} = React.createContext()

const App = () =>{
    <Provider value={{theme: 'dark'}}>
        <MyComponents />
    </Provider>
}

在这棵树的任何组件内：

const Component = () =>{
    return(
        <Consumer>
          {context => console.log(context.theme) /*dark*/}
        </Consumer>
    )
}

还有其他替代方案，例如 redux，但对您的用例来说似乎有点矫枉过正。

创建一个可以从 React 中的任何地方访问的变量

Creating a variable that will be accessible from anywhere in React

javascript

reactjs

mobx