【React】React18 Hooks 之 useContext

这篇文章距离上次修改已过443天，其中的内容可能已经有所变动。




import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
 
const ThemeButton = () => {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ backgroundColor: theme.bgColor, color: theme.textColor }}>
      我是按钮组件
    </button>
  );
};
 
export default ThemeButton;

这个例子中，我们创建了一个名为ThemeButton的按钮组件，它使用useContext钩子从ThemeContext中获取主题信息。按钮的样式会根据上下文中的主题信息来设置背景色和文本颜色。这个例子展示了如何在React 18应用程序中使用Hooks和Context API来管理跨组件的状态。

【React】React18 Hooks 之 useContext

评论已关闭

推荐阅读