React hook useContext 跨文件接收父组件和子组件不在同一个文件中如何进行useContext上下文传

父组件：

import React, { createContext } from 'react';
import Child from './Child.js'

// 导出父组件的Context
export const FatherContext = createContext()

function Father() {
    return (
        <FatherContext.Provider value={{num: '1'}}>
            <Child/>
        </FatherContext.Provider>
    );
}
export default Father;

子组件

import React, { useContext } from 'react';

import { FatherContext} from './Father.js'

function Child() {
    const {num}= useContext(FatherContext); 
    console.log(num) // 1
}
 
export default Child;