当前位置: 首页 > Web前端 > JavaScript

reacthooksuseContext实现父子组件通信

时间:2023-03-26 22:22:31 JavaScript

今天开始接触hooks,真心觉得比类组件轻巧很多。瞬间爱上了~先说说使用useContext实现父子组件通信的问题。贴上我的demo代码~先贴上我用的三个文件父组件App.jsimportReact,{useState}from'react'importCountContextfrom'./CountContext'importCounterfrom'./Counter'exportdefaultfunctionApp(){const[count,setCount]=useState(0)return(

Countervalue:{count}

setCount(count+1)}>点我添加A
)}子组件Counter.jsximportReact,{useContext}from'react'importCountContextfrom'./CountContext'exportdefaultfunctionCounter(){letcount=useContext(CountContext)return(

{count}

)}publiccomponentCountContext.jsximport{createContext}from"react";constCountContext=createContext(null)导出默认CountContext