如何在React中结合使用多个Context

在React中结合使用多个Context非常简单，只需将多个Context提供者包裹在一个父组件中即可。以下是一个示例：

import React from 'react';

// 创建两个Context
const ThemeContext = React.createContext('light');
const UserContext = React.createContext('Guest');

function App() {
  return (
    <ThemeContext.Provider value='dark'>
      <UserContext.Provider value='John'>
        <div>
          <Header />
          <Main />
        </div>
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

function Header() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <header style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}>
          <h1>Header</h1>
        </header>
      )}
    </ThemeContext.Consumer>
  );
}

function Main() {
  return (
    <UserContext.Consumer>
      {user => (
        <ThemeContext.Consumer>
          {theme => (
            <main style={{ color: theme === 'dark' ? 'white' : 'black' }}>
              <h2>Welcome, {user}</h2>
            </main>
          )}
        </ThemeContext.Consumer>
      )}
    </UserContext.Consumer>
  );
}

export default App;

在上面的示例中，我们创建了ThemeContext和UserContext两个Context，并在App组件中将它们包裹在一起。然后在Header和Main组件中分别通过ThemeContext.Consumer和UserContext.Consumer来访问各自的Context值。

通过这种方式，我们可以在React中方便地组合多个Context，并在组件中访问它们的值。