React Hooks学习之旅三:useContext父子组件传值

博客介绍了在React中使用createContext函数创建上下文,useContext函数接收父组件传递的数据。还提到新建Example4.js文件实现父子组件传值,达成父子组件count值共享的效果。

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

createContext函数创建上下文,useContext函数接收父组件传递过来的数据。

新建一个Example4.js文件,实现父子组件传值:

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

const CountContext = createContext();//想共享的要创建上下文

//声明一个子组件,接收count
function Counter(){
    let count = useContext(CountContext);
    return (
        <h2>{count}</h2>
    )
}

function Example(){
    const [count,setCount] = useState(0);//数组解构
   
    return(
        <div>
            <p>You clicked {count} times</p>
            <button 
                onClick={()=>{setCount(count+1)}}
            >
                Click me
            </button>
            {/* cout被共享出去了 */}
            <CountContext.Provider value={count}>
                <Counter/>
            </CountContext.Provider>
        </div>
    )
}

export default Example;

实现效果如下,父子组件的count值共享:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值