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

将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;

练习二：

将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;