以下是一個(gè)使用 React Context 封裝組件傳參的示例代碼
import React, { createContext, useContext, useState } from 'react';
// 創(chuàng)建一個(gè) Context 對(duì)象
const ThemeContext = createContext();
// 創(chuàng)建一個(gè) Provider 組件享幽，用于提供 Context 的值
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
// 創(chuàng)建一個(gè)自定義 hooks鬼贱，用于獲取 Context 的值
const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
};
// 使用示例
const App = () => {
const { theme, toggleTheme } = useTheme();
return (
<div className={theme}>
<h1>My App</h1>
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
);
};
// 在根組件中使用 ThemeProvider 包裹整個(gè)應(yīng)用
const Root = () => {
return (
<ThemeProvider>
<App />
</ThemeProvider>
);
};
export default Root;
在上面的代碼中，我們創(chuàng)建了一個(gè)名為 ThemeContext 的 Context 對(duì)象始赎，并使用 createContext 函數(shù)進(jìn)行創(chuàng)建和橙。然后，我們創(chuàng)建了一個(gè)名為 ThemeProvider 的 Provider 組件造垛，用于提供 ThemeContext 的值魔招。在 ThemeProvider 組件中，我們使用 useState hooks 來管理主題的狀態(tài)五辽，并提供了一個(gè) toggleTheme 函數(shù)办斑，用于切換主題。最后杆逗，我們使用 ThemeContext.Provider 組件將 theme 和 toggleTheme 作為 Context 的值傳遞給子組件乡翅。
在 useTheme 自定義 hooks 中，我們使用 useContext hooks 來獲取 ThemeContext 的值罪郊，并返回 theme 和 toggleTheme蠕蚜。如果在 useTheme hooks 中沒有找到 ThemeContext，則會(huì)拋出一個(gè)錯(cuò)誤悔橄。
在 App 組件中靶累，我們使用 useTheme 自定義 hooks 來獲取 theme 和 toggleTheme，并將 theme 作為 className 屬性的值癣疟，以便在 CSS 中使用挣柬。最后，我們?cè)?button 元素上綁定 toggleTheme 函數(shù)睛挚，以便在點(diǎn)擊按鈕時(shí)切換主題邪蛔。
最后，在根組件中扎狱，我們使用 ThemeProvider 包裹整個(gè)應(yīng)用侧到，以便在整個(gè)應(yīng)用中使用 ThemeContext 的值。
