技术文献

组件通信：使用Context机制跨层传递数据

2026-03-22

整体思路

  • 第一步：创建一个 Context 对象（可以理解为一个 “数据容器”）。
  • 第二步：在 顶层组件（提供数据的组件）中，用 Context.Provider 包裹子组件（A），并通过 value 属性传递需要共享的数据（msg）。
  • 第三步：在 B 组件中，通过 useContext 钩子（React 18 推荐方式）获取 Context 中的数据。
// 导入React核心依赖
import { createContext, useContext } from 'react';
// 第一步：创建Context对象（建议单独抽离文件，这里为了演示写在一起）
// createContext可以传默认值（当组件不在Provider包裹范围内时生效）
const MsgContext = createContext('默认值');

// A组件（中间层，无需处理Context，仅作为容器）
function A(){
 return (
   <div>
     <h3>A组件</h3>
     <B /> {/* 嵌套B组件 */}
   </div>
 );
};

// B组件（消费Context数据）
function B() {
 // 第三步：消费Context数据 - 使用useContext钩子获取
 const msg = useContext(MsgContext);
 return (
   <div>
    this is B compnent：{msg}
   </div>
 );
};

// App组件（顶层，提供Context数据）
function App() {
 // 要传递的变量
 const msg = 'this is App msg';
 return (
   <div>
     <MsgContext.Provider value={msg}>
       <A /> {/* A组件在Provider范围内，其内部的B组件就能拿到数据 */}
     </MsgContext.Provider>
   </div>
 );
};
export default App;
合辑