C/C++教程

useContext 解决函数父子组件传值

本文主要是介绍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 解决函数父子组件传值的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!