如何在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，并在組件中訪問它們的值。