javascript - React/Context相关问题:提供者值内如何有​​多个变量？我正在使用功能组件

const state = useState({
    isLightTheme: true,
    light: { syntax: '#555', ui: '#ddd', bg: '#eee' },
    dark: { syntax: '#ddd', ui: '#333', bg: '#555' },
})

const toggleTheme = () => {
    setState({ isLightTheme: !state.isLightTheme })
}

我尝试了以下方法，但这些方法均无效：


提供者值= {状态，toggleTheme}
提供者值= {[状态，toggleTheme]}
提供者值{{state：state，toggleTheme：toggleTheme}}


我正在使用context.api

最佳答案

您可以在状态中添加toggleTheme方法：

const state = useState({
    isLightTheme: true,
    light: { syntax: '#555', ui: '#ddd', bg: '#eee' },
    dark: { syntax: '#ddd', ui: '#333', bg: '#555' },
    toggleTheme: this.toggleTheme
})

const toggleTheme = () => {
    setState({ isLightTheme: !state.isLightTheme })
}

然后，您可以在用户中拉出toggleTheme：

   <UserConsumer>
      { ({ light, dark, toggleName }) => (
      <div onClick={toggleName}></div>
      )}
   </UserConsumer>

这就是我学到的。我个人不喜欢将方法置于我的状态，但这实际上是一种在状态变量中通过上下文传递方法的方法。

关于javascript - React/Context相关问题:提供者值内如何有​​多个变量？我正在使用功能组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59432620/