概念
一种组件间通信方式，常用于【祖组件】与【后代组件】间通信
应用开发过程中，一般不会使用context，一般都用它封装react插件
示例
//1 创建Context容器对象： cosnt XxxContext = React.createContext(); // 2 渲染子组件时，外面包裹XxxContext.provider，通过value属性给后代组件传递数据： <xxxComponent.Provider value={数据}> 子组件 </xxxComponent.Provider> // 3 后代组件读取数据 // 写法一 // 特点：简便、主要用在类组件 static contextType = xxxContext //声明接收context this.context //读取context中的value数据 // 写法二 // 特点：不需要this、可以接收多个context、主要用在函数组件 <xxxContext.Consumer> { value=>( //value就是context中的value数据 要显示的内容 ) } </xxxContext.Consumer>
实际应用
import React, { Component } from 'react'; // 创建Context对象 const MyContext = React.createContext() const { Provider, Consumer } = MyContext; class A extends Component { state = { name: 'tom', age:15 } render() { const {name,age}= this.state return ( <div> <h2>组件A</h2> <Provider value={{name,age}}> <B/> </Provider> <hr /> </div> ); } } class B extends Component { render() { // console.log(this) return ( <div> <hr /> <h2>组件B</h2> <C/> </div> ); } } // class C extends Component { // // 声明接收 // static contextType = MyContext // render() { // const { name, age } = this.context; // return ( // <div> // <hr /> // <h2>组件C</h2> // <p>{name}-------{age}</p> // </div> // ); // } // } function C (){ return ( <div> <hr /> <h2>组件C</h2> <p> <Consumer> {(value)=>(`${value.name}--------${value.age}`)} </Consumer> </p> </div> ) } export default A;
