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

于 2020-11-17 17:16:00 发布

阅读量492

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/muAluo/article/details/109747390

react 专栏收录该内容

42 篇文章

订阅专栏

博客介绍了在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值共享：