您好,登錄后才能下訂單哦!
在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)它們的值。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng )、轉載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權請聯(lián)系站長(cháng)郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據,一經(jīng)查實(shí),將立刻刪除涉嫌侵權內容。