如何在React函数式组件中创建Context并验证访问权限？

我想了解如何在React函数式组件中创建Context，以下是我编写的相关代码，希望点击按钮时能在控制台打印Context的值，确认可以正常访问它的内容。

Context创建代码（tryContext.js） #

import React, { useState } from "react";

export const DojoContext = React.createContext() 
const ThemeContextProvider = (props)=> {
    
    const [theme, setTheme] = useState({
      isLightTheme: true,
      light: { syntax: "#555", ui: "#ddd", bg: "#eee" },
      dark: { syntax: "#ddd", ui: "#333", bg: "#555" },
    });
  
    return (
      <div>
        <DojoContext.Provider value={{ ...theme }}>
            {props.children}
        </DojoContext.Provider>
      </div>
    );
}

export default ThemeContextProvider;

App组件代码 #

import React from "react";
import Dojo from "./pages/dojo";
import ThemeContextProvider from "./pages/tryContext";

function App() {
  return(
    <div className="App">
      <ThemeContextProvider>
        <Dojo/>
      </ThemeContextProvider>
    </div>
  );
}

export default App;

Dojo组件代码 #

import React, { useContext } from "react";
import DojoContext from "./tryContext";
const Dojo = () => {

    const context = useContext(DojoContext)
    return (
        <div>
            <button onClick={()=>console.log(context)}> log context </button>
        </div>
    );
}
 
export default Dojo; 

问题分析与修复 #

当前代码的核心问题是Dojo组件导入的对象错误：在tryContext.js中，DojoContext是命名导出，而你在Dojo组件里用默认导入的方式import DojoContext from "./tryContext"，实际上导入的是默认导出的ThemeContextProvider组件，而非Context对象，导致useContext无法获取正确的Context值。

修复步骤： #

1. 修改Dojo组件的导入语句，使用命名导入：

import React, { useContext } from "react";
// 改为命名导入
import { DojoContext } from "./tryContext";

const Dojo = () => {
    const context = useContext(DojoContext)
    return (
        <div>
            <button onClick={()=>console.log(context)}> log context </button>
        </div>
    );
}
 
export default Dojo; 

2. （可选优化）如果需要在子组件中修改主题，可以把setTheme也传入Provider的value中：

// 在ThemeContextProvider中修改value
<DojoContext.Provider value={{ ...theme, setTheme }}>
    {props.children}
</DojoContext.Provider>

修改完成后，点击按钮就能在控制台打印出Context的主题对象，确认可以正常访问。

内容的提问来源于stack exchange，提问作者Abdelhamid