react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)

什么是 Context 机制?

Context 机制是 react 实现外层组件向内层组件传值的一种方案,父组件可以向其内部的任一组件传值,无论是子组件还是孙组件或更深层次的组件。

实现步骤

1.使用createContext方法创建一个上下文对象 Ctx

2.在顶层组件中通过Ctx.Provider 组件提供数据

3.在底层组件中通过 useContext 钩子函数获取数据

范例

context.js

创建独立的 context 文件,并导出createContext方法创建的上下文对象 data_context

js 复制代码
import { createContext } from "react";
// 通过传参可以指定默认值
export const data_context = createContext("默认值");

father.jsx

  • 导入上下文对象 data_context
  • data_context.Provider 标签包裹需要传值的内部组件
  • 用 value 属性传值
js 复制代码
import Child from "./child.jsx";
import "./common.css";
import { data_context } from "./context.js";

function Father() {
  const fatherData = "父组件的数据";
  return (
    <>
      <div className="box" style={{ width: "400px" }}>
        <h1>我是父组件</h1>
        <data_context.Provider value={fatherData}>
          <Child />
        </data_context.Provider>
      </div>
    </>
  );
}

export default Father;

common.css

css 复制代码
.box {
    border: 1px solid;
    padding: 20px;
}

child.jsx

js 复制代码
import GrandChild from "./grandchild.jsx";
function Child() {
  return (
    <>
      <div className="box">
        <h1>我是子组件</h1>
        <GrandChild />
      </div>
    </>
  );
}

export default Child;

grandchild.jsx

  • 导入 useContext 和 上下文对象 data_context
  • 调用 useContext 获取数据,参数为上下文对象 data_context
js 复制代码
import { useContext } from "react";
import { data_context } from "./context.js";

function GrandChild() {
  const dataFromGrandfather = useContext(data_context);
  return (
    <>
      <div className="box">
        <h1>我是孙组件</h1>
        <p>父组件传来的数据为:{dataFromGrandfather}</p>
      </div>
    </>
  );
}

export default GrandChild;
相关推荐
lypzcgf9 小时前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
小浣熊喜欢揍臭臭1 天前
react+umi项目如何添加electron的功能
javascript·electron·react
叫我阿柒啊1 天前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
lypzcgf2 天前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
叫我阿柒啊3 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
OEC小胖胖3 天前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web
OEC小胖胖3 天前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
lypzcgf4 天前
Coze源码分析-资源库-创建提示词-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
袋鼠云数栈前端6 天前
实现一个 AI 编辑器 - 行内代码生成篇
大数据·ai·react
lypzcgf6 天前
Coze源码分析-工作空间-项目开发-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构