ReactHooks useContenxt 父子传值

帅癌病患者

于 2021-04-08 17:12:24 发布

阅读量430

点赞数

分类专栏： React个人笔记文章标签： hooks react useContext

本文链接：https://blog.youkuaiyun.com/weixin_51664705/article/details/115525836

版权

React个人笔记专栏收录该内容

11 篇文章

订阅专栏

这篇博客展示了如何在React应用中使用Context API进行状态管理。通过创建一个CountContext并使用Provider组件，父组件可以将状态值传递给子组件，使得在组件层级间的通信更为便捷。例子中，父组件Example4维护了一个计数器状态，并通过CountContext.Provider将状态值传递给Counter子组件显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

const CountContext = createContext();//创建上下文，利用provider提供值

function Counter(){//子组件
    let count = useContext(CountContext)
    return(<h2>{count}</h2>)
}

function Example4(){
    const [count,setCount] = useState(0)
    return(
        <div>
            <p>You Clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>Click me</button>
            <CountContext.Provider value={count}>
                    <Counter/>
            </CountContext.Provider>
        </div>
    )
}
export default Example4;