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

Question

我正在尝试在 React 中创建深色模式。为此，我需要一个可以访问的“巨型变量”从组件树上的任何地方看起来像:

let darkMode = false 

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

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

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

Answer 1

小心全局变量。实际上，考虑到 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，但对于您的用例来说似乎有点矫枉过正。