React Hooks --- useContext父子组件传参

1.引用createContext,useContext

import React,{createContext,useContext} from 'react';

2. 创建个变量接受一下createContext，例：

const  ageContext = createContext();

3.在父组件中定义要传递的值(value变量)，一定要使用.Provider,ageContext是前面设置的变量

<ageContext.Provider value={age}>
            <Child></Child>
 </ageContext.Provider>

4.在子组件中使用useContext，定义个变量接收，然后在子组件中引用即可

 let childAge = useContext(ageContext);

效果如图所示：

完整代码如下：

import React,{createContext,useContext} from 'react';
const  ageContext = createContext();
function Child(){
     let childAge = useContext(ageContext);
     return (
     <h1>我是子组件----{childAge}</h1>
     )
}
function App() {
   const age = 18;
  return (
    <div>
      <h1>我是父组件------今年{age}岁</h1>
      <ageContext.Provider value={age}>
            <Child></Child>
      </ageContext.Provider>
    </div>
  );
}
export default App;