组件通信方式之Context祖组件与后代组件之间的通信

Context

一种组件间通信的方式，常用于祖组件与后代组件间的通信

使用

1. 创建Context容器对象
	const XxxContext = React.createContext()
2. 渲染子组件时，外面包裹 XxxContext.Provider，通过value属性给后代组件传递数据：
	<XxxContext.Provider value={数据}>
		子组件
	</XxxContext.Provider>
3. 后代组件获取数据：
	// 第一种方式：仅适用于类组件
	static contextType = XxxContext	// 声明接收
	this.context	// 读取context中的value数据

	// 第二种方式：函数组件和类组件都可以
	<XxxContext.Consumer>
		{
			value => ( // value就是context中的value数据
				return 显示的内容
			)
		}
	</XxxContext.Consumer>

注意

在应用开发中一般不用context，一般都用它的封装react插件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

// 创建Context对象
const NameContext = React.createContext()
// 使用解构赋值就可以直接用 <Provider>而不用<NameContext.Provider>...
const {Provider, Consumer} = NameContext 


class A extends Compontent {
	state = {name: 'Tom', age: 18}
	render () {
		const {name, age} = this.state
		return (
			<div>
				<h3>我的A组件</h3>
				<h4>我的名字是:{name}</h4>
				<Provider value={{name, age}}>
					<B/>
				</Provider>
			</div>
		)
	}
}
class B extends Compontent {
	render () {
		return (
			<div>
				<h3>我的B组件</h3>
				<h4>A组件传递的名字是:{this.props.name}</h4>
				<C/>
			</div>
		)
	}
}
/*
// 类组件
class C extends Compontent {
	// 声明接收context
	static contextType = NameContext
	render () {
		const {name, age} = this.context
		return (
			<div>
				<h3>我的C组件</h3>
				<h4>A组件传递的名字是:{name},年龄是:{age}</h4>
			</div>
		)
	}
}
*/
// 函数组件或者类组件
function C(){
	return (
		<div>
			<h3>我的C组件</h3>
			<h4>A组件传递的名字是:
				<Consumer>
					{value => `${value.name},年龄是:${value.age}`}
				</Consumer>
			</h4>
		</div>
	)
}

export default A