react hook useContext 跨文件接收

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

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

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

父组件:

import React, { useState, createContext } from 'react'
import Counter from './Counter'

export const countContext = createContext()

export default function Example4() {
    const [count, setCount] = useState(0)
    return (
        <div>
            <p>你点击了{count}次</p>
            <button onClick={()=>{setCount(count+1)}}>点击</button>
            <countContext.Provider value={count}>
                <Counter />
            </countContext.Provider>
        </div>
    )
}

　子组件:

import React, { useContext } from 'react'
import { countContext } from './Example4'

function Counter() {
    let count = useContext(countContext)
    return (
        <div>
            <h2>{count}</h2>
        </div>
    )
}

export default Counter

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