useContext 错误 - TypeError：无法读取未定义的属性（读取“名称”）

Question

在我的简单反应项目中，我正在尝试实现 useContext。但它向我显示错误。

Context.js 文件 -

import { createContext } from "react";
    
    const Info = createContext()
    function Provider(){
        const name = 'Arko'
        return(
            <Info.Provider value={{name}}></Info.Provider>
        )
    }
    export {Provider}
    export default Info

Contx.js 文件 -

import { useContext } from "react";
import Info  from "../components2/context";

function Contx(){
    const hi = useContext(Info)
    return(
        <div>{hi.name}</div>
    )
}

export default Contx

App.js 文件 -

import Contx from './components/contx';
import { Provider } from './components2/context';

function App() {
  return (
    <div>
      <Provider>
        <Contx/>
      </Provider>  
    </div>
  );
}

export default App;

屏幕上呈现的错误 -

无法读取未定义的属性（读取“名称”） 类型错误：无法读取未定义的属性（读取“名称”）

请帮忙解决。

我尝试在屏幕上显示“Arko”，但显示错误。

Answer 1

您需要将

children

传递到

Info.Provider

import { createContext } from "react";

const Info = createContext()
function Provider({children}){
    const name = 'Arko'
    return(
        <Info.Provider value={{name}} >{children}</Info.Provider>
    )
}
export {Provider}
export default Info