其他分享
首页 > 其他分享> > 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

标签:count,createContext,const,let,组件,useContext,传值
来源: https://www.cnblogs.com/xuelinomen/p/15988997.html