useContext 挂钩返回未定义

Question

在 App 组件内部，我有 Component1，它有一个嵌套组件。 我使用React.createContext()创建了一个 contextApi 以在嵌套组件中使用它。 使用useContext()挂钩我试图从App.js获取myname值并将其用作样式，但它返回undefined. 应用组件

      import logo from './logo.svg';
      import './App.css';
      import Component1 from '../src/Component1/Component1'
      import React from 'react'
      export const Theme  = React.createContext();
      function App() {

      const myname = {
       width:'100px',
       height:'100px',
       background:'red'
     }
    return (
<Theme.Provider  value={{myname}}>
  <Component1>
    </Component1> 
</Theme.Provider>

); }

   export default App;

组件1

      import NestedComponent from '../NestedComponent/NestedComponent'
      function Component1 (){
      return <NestedComponent></NestedComponent>
       }
     export default Component1

嵌套组件

import Theme from '../App'
import {useContext} from 'react'
  export default function  NestedComponent(){
    const mystyle  = useContext(Theme)   //returns undefined
    return  <div style = {mystyle}>  </div>

}

Answer 1

在Theme.Provider里面这样做：

<Theme.Provider  value={myname}>

它会起作用的。 在这里检查