跨组件通信 (2)

跨组件通信

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 消费者组件拿到各自上下文对象中生产出来的数据