时间戳

首页 > 解决方案 > 创建一个可以从 React 中的任何地方访问的变量

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

问题描述

我正在尝试在 React 中创建暗模式。为此，我需要一个可以从组件树上的任何位置访问的“巨型变量”，如下所示：

let darkMode = false

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

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

我试图用 MobX 来做，但没有用。它不会像在状态更改中那样重新渲染。我能做些什么？

标签： javascriptreactjsmobx

解决方案

小心global variables。实际上，考虑到 React 的流程，甚至很难实现这一点（也许使用window对象？）。你想要的可以用Context API. props这是一种通过组件的解耦方式。通过使用 a 包装应用程序的最高级别，您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但似乎对您的用例来说有点过头了。

推荐阅读