react hooks useContext 实现父子组件通讯

今天接触了一下 hooks , 确实感觉相比 class 组件要轻量及很多,瞬间爱上了~
我来说一下使用 useContext 时实现父子组件通讯问题,贴上我demo的代码~
先贴上我用到的三个文件
react hooks useContext 实现父子组件通讯_第1张图片

父组件 App.js

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

export default function App() {
  const [ count, setCount ] = useState(0)
  return (
    

计数器值为: { count }

) }

子组件 Counter.jsx

import React, { useContext } from 'react'
import CountContext from './CountContext'

export default function Counter() {
  let count = useContext(CountContext)
  return (
    

{count}

) }

公共组件 CountContext.jsx

import { createContext } from "react";

const CountContext = createContext(null)
export default CountContext

react hooks useContext 实现父子组件通讯_第2张图片

你可能感兴趣的