React: hook(3) useContext

最新推荐文章于 2025-08-20 11:19:25 发布

amadeus_liu2

最新推荐文章于 2025-08-20 11:19:25 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/126500649

React 专栏收录该内容

34 篇文章

订阅专栏

这篇博客展示了如何在React应用中创建一个ThemeContext，用于管理应用的主题。通过使用`createContext`创建上下文，然后在组件树中传递主题，实现了按钮组件根据主题背景和前景颜色动态改变样式。主要涉及的技术包括React hooks（useState, useContext, useLayoutEffect）以及react-router-dom的导航元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import logo from './logo.svg';
import { Routes, Route, Link } from "react-router-dom";
import {react,useState,useEffect,useLayoutEffect,useContext} from "react"
import './App.css';
import React from "react"

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};


const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}



export default App;