react中context的使用详解

本文详细介绍了React中的Context特性,主要用于解决多层级组件间通信的问题,避免繁琐的props传递。通过创建和使用Context,可以在任意层级的组件中直接获取到父组件的数据。文章通过一个实例展示了如何在index父组件、child1子组件和child2孙组件之间使用Context进行数据传递,并提供了store.js中创建数据和Context的步骤,以及在index.jsx和child2组件中接收和使用Context的步骤。

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

先说一说context是干什么的:

        跨层级通信

        一般组件通信的方法都是通过props来传递,不过这种方法当有了第三级或往后孙孙组件的时候就显得比较繁琐。以及不好修改。这时我们可以使用context来管理这些数据,不管多少层级都能让想要使用这些数据的组件能拿到。还有别的方法,mobx或redux。这些可以自行了解

 说一下文件目录以及思路:

        创建index文件作为父组件,child1组件为子组件,child2为子子组件。同级下创建一个store.js中存放数据和创建context。

        index中呢引入child1组件,child1组件呢引入child2组件。我们现在要做的就是不使用props在child2中获取index父级的数据。

store.js :

        可以分为三步:1.引入React。2.创建数据。3.创建导出context

import React from 'react';

这里我们可以定义数据格式
export const Resume = {
    base: {
        name: '',
        age: ''
    },
    exp: {
        year: '',
        job: ''
    },
    lists: [],
}

通过createContext创建context并导出
export const ResumeContext = React.createContext(Resume);

index.jsx作为父

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值