react hook useContext 跨文件接收

在学习 React Hook 的时候,遇到了 子组件 需要触发 父组件 的方法的问题.

网上百度了一遍, 都是说的用 useContext 做上下文传递, 但是很多例子都是写在同一个页面上的,而我这边已经拆分成了几个不同的组件文件,用的时候发现报错

百度了一下,没有找到具体的解决办法.后面根据报错信息,修改后发现原来要这样写, 发现自己真的太菜了

父组件:

// 引入 createContext 
import React, {
      createContext } from 'react';
import Son from './tpls/son'

// 在函数外部传递当前上下文,导出
export const FatherContext = createContext()

function Father() {
     

	// 不要在函数内部使用 createContext()
	// const FatherContext = createContext() 
	
    return (
    	// 此处需要使用 Provider 
        <FatherContext.Provider value={
     {
     fatherName: 'linc'}}>
            <Son/>
        </FatherContext.Provider>
    );
}
export default Father;

子组件:

// useContext 接受来自父组件的关爱
import React, {
      useContext } from 'react';

// 重点: 从父组件那里引入我们一开始导出的 FatherContext 
// 就是父组件的这条代码: export const FatherContext = createContext()
import {
      FatherContext} from '../index'

function Son() {
     
    // 通过上下文获取到的父组件传递过来的数据.
    // 也可以传递事件,子组件可以通过传递过来的数据触发父组件的事件
    const {
     fatherName}= useContext(FatherContext); 
    console.log(fatherName) // linc
}
 
export default Son;

基本就是这个套路,感觉这个useContext确实好用,起码跨级传递数据不用那么麻烦了,或者直接在 App 入口处给传递一下用户的信息,那页面的所有组件都可以调用到登陆时候的用户信息了,不用redux去存取,美滋滋