跨组件通信 (2)

2021-12-04 14:33:20 阅读：129 来源： 互联网

标签：return render Component 通信 React 组件上下文

跨组件通信

import React from 'react';
// 创建上下文件对象
const Context = React.createContext({});
// 从上下文中获取容器组件
// Provider 生产者容器组件 负责生产数据
// Consumer 消费者容器组件 负责使用数据
const {Provider, Consumer} = Context;
class Son extends React.Component {
  render() {
    return (
      <Consumer>
        {
          (value) => {
            return (
              <div>
                <p>{value.name}</p>
                <p>{value.age}</p>
              </div>
            )
          }
        }
      </Consumer>
    )
  }
}
class Father extends React.Component {
  render() {
    return (
      <div>
        <h2>Father</h2>
        <Son />
      </div>
    );
  }
}
class App extends React.Component {
  render() {
    return (
      <Provider value={{name: 'xiebenyin', age: 66}}>
        <h1>App</h1>
        <Father />
      </Provider>
    )
  }
}

export default App;

调用 React.createContext 函数创建一个 Context 上下文对象
从 Context 上下文对象中解构出 Provider 生产者组件和 Consumer 消费者组件
使用 Provider 组件的时候通过 value 属性生产数据
在后代组件中使用 Consumer 消费者组件消费 Provider 生产出来的数据
Consumer 消费者组件在使用时会自动调用一个回调函数，并将 Provider 生产出来的数据作为回调函数的第一个参数传递进去

上下文对象的第二种使用方法

import React from 'react';
// 创建上下文对象
const Context = React.createContext({
  name: 'xiebenyin',
  age: 66
});

class Son extends React.Component {
  render() {
    return (
      <div>
        <h3>Son</h3>
        <p>{this.context.name}</p>
        <p>{this.context.age}</p>
      </div>
    )
  }
}
// 扩展一个静态属性
Son.contextType = Context
class Father extends React.Component {
  render() {
    return (
      <div>
        <h2>Father</h2>
        <Son />
      </div>
    );
  }
}
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <Father />
      </div>
    )
  }
}

export default App;

调用 React.createContext 函数时传递一个参数作为数据
给任意一个类组件扩展一个静态属性 contextType 取值是 Context 上下文对象
在该组件中通过 this.context.name 就可以使用上下文中的数据

多个上下文对象的使用

import React from 'react';

// 创建两个上下文对象
const Context1 = React.createContext({});
const Context2 = React.createContext({});

class Son extends React.Component {
  render() {
    return (
      <Context1.Consumer>
        {
          (value1) => {
            return (
              <Context2.Consumer>
                {
                  (value2) => {
                    return (
                      <div>
                        <p>{value1.name}</p>
                        <p>{value2.age}</p>
                      </div>
                    )
                  }
                }
              </Context2.Consumer>
            )
          }
        }
      </Context1.Consumer>
    );
  }
}

class Father extends React.Component {
  render() {
    return (
      <div>
        <h2>Father</h2>
        <Son />
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Context1.Provider value={{name: 'xiebenyin'}}>
        <Context2.Provider value={{age: 66}}>
          <h1>App</h1>
          <Father />
        </Context2.Provider>
      </Context1.Provider>
    )
  }
}

export default App;

创建两个上下文对象 Context1 和 Context2
使用 Context1.Provider 生产者组件通过 value 生产数据并在内部使用 Context2.Provider 生产者组件生产数据
在后代组件中，可以通过 Context1.Consumer 或 Context2.Consumer 消费者组件拿到各自上下文对象中生产出来的数据

标签：return,render,Component,通信,React,组件,上下文
来源： https://www.cnblogs.com/xiebenyin-/p/15641905.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

跨组件通信 (2)

跨组件通信

上下文对象的第二种使用方法

多个上下文对象的使用