Question

在 App 组件内部，我有一个 Component1，它有一个嵌套组件。我创建了一个带有 React.createContext() 的 contextApi 以在嵌套组件中使用它。使用 useContext() 钩子我试图从 myname 获取 App.js 值并将其用作样式，但它返回 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}>

它会起作用。检查here

useContext 钩子返回 undefined

1 个答案: