这是我参与「第五届青训营」伴学笔记创作活动的第 10 天

学习笔记

React的学习5

context跨级组件通讯

跨级组件通讯就是组件之间相隔多层。context为上下文，理解为一个范围，只要在这个context之内，就可以实现跨级组件的通讯。
代码示例： index.jsx

import React, { Component, createContext } from 'react'
import Parent from './Parent'
 
// 1. 创建上下文对象
// @ts-ignore
export const MyContext = createContext()
 
export default class App extends Component {
  state = {
    iq: 100
  }
  updateIq = newIq => {
    this.setState({
      iq: newIq
    })
  }
  render() {
    return (
  // 2. Provider包裹确定上下文生效范围，value注入范围内可用的数据
      <MyContext.Provider value={{
        iq: this.state.iq,
        updateIq: this.updateIq
      }}>
        <div className="app">
          <h1>根组件：{this.state.iq}</h1>
          <hr />
          <Parent />
        </div>
      </MyContext.Provider>
    )
  }
}

Parent.jsx

import Child from './Child';
const Parent = () => {
  return (
    <div className="parent">
      <h3>父组件：</h3>
      <hr />
      <Child />
    </div>
  );
};
 
export default Parent;

Child.jsx

import { MyContext } from './App'
 
const Child = () => {
  return (
 // 3. 通过Consumer来消费数据，value=>{ 这里使用数据 }
    <MyContext.Consumer>
      {(value) => (
        <div className="child">
          <h5>子组件：{value.iq} <button onClick={
          ()=>value.updateIq(50)
          }>修改iq</button></h5>
        </div>
      )}
    </MyContext.Consumer>
  );
};
 
export default Child;

使用creatContext()创建一个上下文对象，包含：Provider Consumer 组件。
使用 Provider 包裹组件，value 属性注入状态，函数，被包裹组件下的任何组件可以使用。
使用 Consumer 消费 Provider 提供的数据和函数，语法{value=>使用数据和函数}

根据之后内容再进行补充。。。。。。。。。。

学习react|青训营笔记

学习笔记

React的学习5

context跨级组件通讯