如何在React中結合使用多個(gè)Context

在React中結合使用多個(gè)Context非常簡(jiǎn)單，只需將多個(gè)Context提供者包裹在一個(gè)父組件中即可。以下是一個(gè)示例：

import React from 'react';

// 創(chuàng  )建兩個(gè)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;

在上面的示例中，我們創(chuàng )建了ThemeContext和UserContext兩個(gè)Context，并在App組件中將它們包裹在一起。然后在Header和Main組件中分別通過(guò)ThemeContext.Consumer和UserContext.Consumer來(lái)訪(fǎng)問(wèn)各自的Context值。

通過(guò)這種方式，我們可以在React中方便地組合多個(gè)Context，并在組件中訪(fǎng)問(wèn)它們的值。