Question

检查 App 的渲染方法。

我正在尝试使用 Context Api 我有 App 组件，它返回 Component1 ，它具有嵌套组件。我想，因为我将 Component1 包装在 ContextApi.Provider 内，所有它的嵌套组件都应该看到作为道具传递给 contextApi 的值。每次将元素包装在 ContextApi 中时，我都会遇到相同的错误。

这是应用程序组件：

   import logo from './logo.svg';
   import './App.css';
   import Component1 from '../src/Component1/Component1'
   import ContextApi from '../src/context-api'

    function App() {
      return (
      <ContextApi.Provider   value={{
         name :"PARVIZ PIRIZADA"
 
       }}>
      <Component1></Component1> 
   </ContextApi.Provider>
  );
}
          export default App;

这是组件1

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

这是嵌套组件

import ContextApi from '../context-api'
 export default function  NestedComponent(){
    return <ContextApi.Consumer>   // here I am trying to get value in contextApi as an consumer
    {(ctx)=>{
        return <div> {ctx.name}</div>
    }}
     </ContextApi.Consumer>

}

这是我的 ContextApi

  import  React from   'react'
  export default function Context(){
   return React.createContext({
    name : "PARVIZ"
})

}

错误：元素类型无效：应为字符串（对于内置组件）

0 个答案: