0
点赞
收藏
分享

微信扫一扫

react hooks useContext

IT影子 2023-01-03 阅读 114


父子传值  跨层级传值

父组件引入并创建createContext,子组件引入useContext

import React, { useState , createContext ,useContext } from 'react';

const CountContext = createContext() //创建一个createContext

function UseContext(){
const [ count , setCount ] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={()=>{setCount(count+1)}}>click me</button>
{/* 用CountContext包裹子组件传递*/}
<CountContext.Provider value={count}>
<Counter/>
</CountContext.Provider>
</div>
)
}
export default UseContext;

//子组件
function Counter(){
const count = useContext(CountContext) //得到传来的conut
return (<h2>{count}</h2>)
}

 

举报

相关推荐

0 条评论