javascript - React/Context 相关问题 : How to have multiple variables within provider value? 我正在使用功能组件

Question

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 })
}

我尝试了以下方法，但都不起作用:

• 提供程序值={state,toggleTheme}

• 提供程序值={[state,toggleTheme]}

• 提供程序值 {{state: state,toggleTheme:toggleTheme}}

我正在使用 context.api

Answer 1

您可以添加您的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>

我就是这么学的。我个人不喜欢将方法放入我的状态中，但这实际上可以作为在状态变量中通过上下文传递方法的一种方式。