React 组件之间的通信（context上下文对象）

m0_53829130

已于 2022-12-02 16:18:59 修改

阅读量447

点赞数

CC 4.0 BY-SA版权

文章标签： react.js 前端前端框架

于 2022-12-02 16:01:12 首次发布

本文链接：https://blog.csdn.net/m0_53829130/article/details/128149558

本文介绍如何使用 React 的 Context API 进行跨组件状态管理。通过两个实例详细讲解了单个及多个父组件如何向子组件传递数据，包括 Provider 和 Consumer 的用法。

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

将Father 组件中的数据(状态数据或非状态数据) 传递给 Son1组件

context 上下文对象传值有两种方式:

1、

父组件发送数据: 父组件通过 Context 对象中 provider 属性向指定的目标组件(Son1)传递指定的数据 value属性绑定传值对象(value名称不能随意修改)

目标组件(Son1)接收数据: 定义静态变量 static contextType ，将Context（FatherContext）对象赋值赋值给contextType，再通过 this.context 进行 value 属性值接收

练习一：

Father.jsx:

import { Component } from 'react';

import Son from './Son';

import FatherContext from './FatherContext';


const { Provider } = FatherContext;

class Father extends Component {

  state = {
    person: {
      name: '张三',
      age: 300
    }
  }

  render() {
    return (
      <div>
        <h1>Father组件:</h1>
        <h3>{this.state.person.name} --- {this.state.person.age}</h3>
        <button onClick={this.handleAge.bind(this)}>修改person age</button>
        <hr/>
       {/*  <FatherContext.Provider value={{person: this.state.person, msg: 'Hello'}}>
          <Son/>
        </FatherContext.Provider> */}

        <Provider value={{person: this.state.person, msg: 'Hello'}}>
          <Son/>
        </Provider>
       
      </div>
    )
  }

  handleAge(){
    this.setState({
      person: {...this.state.person, age: new Date().getTime()}
    });
  }
}

export default Father;

FatherContext.js:

/* 
创建 Father 组件所需的 Context
 */

import { createContext } from 'react';

/* 
createContext(params) : 创建Context对象  params: 任意类型(基础类型、 引用类型) 给新建的Context对象设置默认值 在对应的组件中没有提供 Provider 则目标组件获取 默认值
*/
const FatherContext = createContext();

export default FatherContext;

Son.jsx:

import { Component } from 'react';

import Son1 from './Son1';

class Son extends Component {
  render() {
    return (
      <div>
        <h1>Son组件:</h1>
        <hr/>

        <Son1/>
      </div>
      
    )
  }
}

export default Son;

Son1.jsx:

import { Component } from 'react';

import FatherContext from './FatherContext';

class Son1 extends Component {

  // 指定静态 contextType 变量值为 接收上下文对象(FatherContext) 注：contextType不能随意修改
  // static contextType = FatherContext;

  render() {
    console.log('Son1 this.context=>', this.context);
    const { msg, person } = this.context;
    return (
      <div>
        <h1>Son1组件:</h1>
        <h4>msg: {msg}</h4>
         <h4>person: {person.name} --- {person.age}</h4>
      </div>
      
    )
  }
}

Son1.contextType = FatherContext;

export default Son1;

练习二：

将Father 组件中的数据(状态数据或非状态数据) 传递给 Son1组件

context 上下文对象传值有两种方式:

2、多个父组件传值给子组件(Father、Son 同时传值给 Son1)

父组件发送数据: 父组件通过 Context 对象中 provider 属性向指定的目标组件(Son1)传递指定的数据 value属性绑定传值对象(value名称不能随意修改)

目标组件(Son1)接收数据: 通过 Context 对象中提供的consumer 进行接收

Father.jsx

import { Component } from 'react';

import Son from './Son';

import FatherContext from './FatherContext';



const { Provider } = FatherContext;

class Father extends Component {

  state = {
   content: 'Hello Father',
  }

  render() {
    return (
      <div>
        <h1>Father组件:</h1>
       
        <hr/>
       {/*  <FatherContext.Provider>
          <Son/>
        </FatherContext.Provider> */}

        <Provider value={this.state.content}>
          <Son/>
        </Provider>
       
      </div>
    )
  }


}

export default Father;

FatherContext.js

/* 
创建 Father 组件所需的 Context
 */

import { createContext } from 'react';

/* 
createContext(params) : 创建Context对象  params: 任意类型(基础类型、 引用类型) 给新建的Context对象设置默认值 
*/
const FatherContext = createContext('Father Context默认值');

export default FatherContext;

Son.jsx

import { Component } from 'react';

import Son1 from './Son1';

import SonContext from './SonContext';

class Son extends Component {
  render() {
    return (
      <div>
        <h1>Son组件:</h1>
        <hr/>
        <SonContext.Provider value={'Hello Son'}>
          <Son1/>
        </SonContext.Provider>
        
      </div>
      
    )
  }
}

export default Son;

Son1.jsx

import { Component } from 'react';

import FatherContext from './FatherContext';
import SonContext from './SonContext';


/* 
目标组件(Son1) 接收多个Context 对象：

通过 Conext 对象 提供的consumer 属性接收
 */

class Son1 extends Component {

  
  render() {
    console.log('Son1 this.context=>', this.context);
   
    return (
      <div>
        <h1>Son1组件:</h1>
        
      {/*   <SonContext.Consumer>
          {
            function(sonValue){
              return (
                <h3 className="h3 text-danger">接收Son传递的值:{sonValue}</h3>
              )
            }
          }
        </SonContext.Consumer>

        <FatherContext.Consumer>
          {
            function(fatherValue){
              return (
                <h3 className="h3 text-danger">接收Father传递的值:{fatherValue}</h3>
              )
            }
          }
        </FatherContext.Consumer> */}

      {/*   <SonContext.Consumer>
          {
            sonValue =>  (
              <h3 className="h3 text-danger">接收Son传递的值:{sonValue}</h3>
            ) 
          }
        </SonContext.Consumer>

        <FatherContext.Consumer>
          {
            fatherValue =>  (
              <h3 className="h3 text-danger">接收Father传递的值:{fatherValue}</h3>
            )
          }
        </FatherContext.Consumer> */}

        <SonContext.Consumer>
          {
            sonValue =>  (
              <div>
                <h3 className="h3 text-danger">接收Son传递的值:{sonValue}</h3>
                <FatherContext.Consumer>
                {
                  fatherValue =>  (
                    <h3 className="h3 text-danger">接收Father传递的值:{fatherValue}</h3>
                  )
                }
              </FatherContext.Consumer>
            </div>
            ) 
          }
        </SonContext.Consumer>

       

      </div>
      
    )
  }
}

export default Son1;

SonContext.js


import {createContext} from 'react';


const SonContext = createContext('Son Context 默认值');

export default SonContext;