react中使用Context实现跨层级组件传递数据

最新推荐文章于 2025-05-23 21:35:57 发布

原创

最新推荐文章于 2025-05-23 21:35:57 发布 · 468 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #html #javascript #es6

这篇博客详细介绍了如何利用React的Context API来实现跨层级组件的数据传递。首先，创建一个Context组件作为数据容器，然后确保需要接收数据的子组件被这个Context组件包围。最后，通过组件的contextType静态属性接收并渲染传递过来的数据。

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

演示demo如下：

import React,{
   
   Component} from 'react';
import ReactDOM from 'react-dom';

//创建Context组件，ContextDemo是自己随便命名的，不是固定写法
const ContextDemo = React.createContext(); 

export default class ChiDemo extends Component{
   
    
    constructor(){
   
   
        super()
        this.state