美文网首页
react context 传参

react context 传参

作者: zhao_madman | 来源:发表于2023-04-13 12:29 被阅读0次

以下是一个使用 React Context 封装组件传参的示例代码

import React, { createContext, useContext, useState } from 'react';

// 创建一个 Context 对象
const ThemeContext = createContext();

// 创建一个 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>
  );
};
// 创建一个自定义 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 包裹整个应用
const Root = () => {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
};

export default Root;

在上面的代码中,我们创建了一个名为 ThemeContext 的 Context 对象,并使用 createContext 函数进行创建。然后,我们创建了一个名为 ThemeProvider 的 Provider 组件,用于提供 ThemeContext 的值。在 ThemeProvider 组件中,我们使用 useState hooks 来管理主题的状态,并提供了一个 toggleTheme 函数,用于切换主题。最后,我们使用 ThemeContext.Provider 组件将 themetoggleTheme 作为 Context 的值传递给子组件。

useTheme 自定义 hooks 中,我们使用 useContext hooks 来获取 ThemeContext 的值,并返回 themetoggleTheme。如果在 useTheme hooks 中没有找到 ThemeContext,则会抛出一个错误。

App 组件中,我们使用 useTheme 自定义 hooks 来获取 themetoggleTheme,并将 theme 作为 className 属性的值,以便在 CSS 中使用。最后,我们在 button 元素上绑定 toggleTheme 函数,以便在点击按钮时切换主题。

最后,在根组件中,我们使用 ThemeProvider 包裹整个应用,以便在整个应用中使用 ThemeContext 的值。

相关文章

网友评论

      本文标题:react context 传参

      本文链接:https://www.haomeiwen.com/subject/izpaddtx.html