使用 createContext 和useContext不能使用的问题

关注

原创最新推荐文章于 2026-11-05 18:34:53 发布 748 阅读 AI 写同款· GEO 优化 ›

React进阶用法和hooks的个人使用见解(Typescript版本) - 4.useReducer+useContext+createContext的使用、模拟redux合并reducer 4.useReducer+useContext+createContext的使用、模拟redux合并reducer createContext:一个创建上下文函数，执行产生一个上下文对象，包含两个属性，Provider组件和Consumer组件 Provider:用来包裹整合组件，传递一个value属性，把context上下文注入到整个组件当中 Consumer组件，在里面使用函数调用Provid... 阅读详情

pages/index.js
import React, { useState, createContext } from 'react'
import Header from '../components/Header'
export const MylistContext = createContext({});
export default function Home(list) {
 const color = { color: 'blue' }
 return (
  <>
      <Head><title>Home</title></Head>
      <MylistContext.Provider value={color}>
        <Header />
      </MylistContext.Provider>
 <>
}

Header 头部

import React, { useState, useEffect, useContext } from 'react'
import { MylistContext } from '../pages/index'
const Header = () => {
    const { color } = useContext(MylistContext)
    console.log(MylistContext)
    console.log(color)
   	return(
		<div></div>
    )
   }