useContext 解决函数父子组件传值
2022/3/10 23:19:34
本文主要是介绍useContext 解决函数父子组件传值,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1在父组件外部定义变量A创建上下文,2在父组件使用变量A<A.Provider> <子组件/> </A.Provider> ,3.在子组件中创建变量使用useContext(),把定义变量返回出去
import React, { useState,createContext,useContext } from 'react' let contContext = createContext() // let ageContest = createContext() const SonContext =()=>{ // let age = 19 let count = useContext(contContext) return( <> {count} </> ) } const UseContext = ()=>{ const [count ,usecount] = useState(0) return( <div>{count} <button onClick={()=>{ usecount(count+1) }}>usecount</button> <contContext.Provider value={count} > <SonContext /> <Son2CountContext /> </contContext.Provider> </div> ) } export default UseContext
这篇关于useContext 解决函数父子组件传值的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28pyqt 怎么打包整个项目-icode9专业技术文章分享
- 2024-09-28laravel Commands 创建带有参数的 Artisan 命令的步骤和示例-icode9专业技术文章分享
- 2024-09-28antd怎么实现渲染tiff图片-icode9专业技术文章分享
- 2024-09-28英文半角中划线和中文全角的中划线有什么区别-icode9专业技术文章分享
- 2024-09-28nvm npm 和node 他们之间有什么关系-icode9专业技术文章分享
- 2024-09-28Node Version Manager (nvm)使用教程-icode9专业技术文章分享
- 2024-09-28nvm命令太慢,是什么原因-icode9专业技术文章分享
- 2024-09-28Kotlin 如何增加、删除和修改 MutableStateFlow 中的值。-icode9专业技术文章分享
- 2024-09-28Kotlin的stateFlow.update 写法介绍-icode9专业技术文章分享
- 2024-09-28kotlin 怎么获取当前时间格式-icode9专业技术文章分享