React-54：Context（组件间进行通信）

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信
在应用开发中一般不用context, 一般都它的封装react插件

创建一个 上下文 content 上下文是一个独立于组件的对象 Provider 创建一个上下文 Consumer使用上下文

1. 创建Context容器对象：

const XxxContext = React.createContext()  

2. 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：

<xxxContext.Provider value={数据}>
		子组件
</xxxContext.Provider>

3. 后代组件读取数据：

（1） 第一种方式:仅适用于类组件

 static contextType = xxxContext  // 声明接收context
 this.context // 读取context中的value数据

（2）第二种方式: 函数组件与类组件都可以

 <xxxContext.Consumer>
	    {
	      value => ( // value就是context中的value数据
	        要显示的内容
	      )
	    }
</xxxContext.Consumer>

全部代码：

import React from 'react';
// 创建一个 上下文 content 上下文是一个独立于组件的对象 Provider 创建一个上下文 Consumer使用上下文
const MyContext = React.createContext();
const { Provider, Consumer } = MyContext;
export default function Content() {
  const [userName, setUserName] = React.useState({ name: 'jack', age: 18 });
  return (
    <div>
      <h1>我是A组件</h1>
      <h2>我的用户名是{userName.name}</h2>
      <Provider value={userName}>
        <B userName={userName} />
      </Provider>
    </div>
  );
}

function B(props) {
  return (
    <div>
      <h3>我是B组件</h3>
      <h4>我的用户名是{props.userName.name}</h4>
      <C />
    </div>
  );
}

function C(props) {
  console.log(props);
  return (
    <div>
      <h3>我是C组件</h3>
      <h4>我的用户名是:</h4>
      {/* 接受context */}
      <Consumer>{(value) => `${value.name},年龄是${value.age}`}</Consumer>
    </div>
  );
}

---------------------------------------------------------------------------------- or

import React, { Component } from 'react'
import './index.css'

//创建Context对象
const MyContext = React.createContext()
const {Provider,Consumer} = MyContext
export default class A extends Component {

	state = {username:'tom',age:18}

	render() {
		const {username,age} = this.state
		return (
			<div className="parent">
				<h3>我是A组件</h3>
				<h4>我的用户名是:{username}</h4>
				<Provider value={{username,age}}>
					<B/>
				</Provider>
			</div>
		)
	}
}

class B extends Component {
	render() {
		return (
			<div className="child">
				<h3>我是B组件</h3>
				<C/>
			</div>
		)
	}
}

/* class C extends Component {
	//声明接收context
	static contextType = MyContext
	render() {
		const {username,age} = this.context
		return (
			<div className="grand">
				<h3>我是C组件</h3>
				<h4>我从A组件接收到的用户名:{username},年龄是{age}</h4>
			</div>
		)
	}
} */

function C(){
	return (
		<div className="grand">
			<h3>我是C组件</h3>
			<h4>我从A组件接收到的用户名:
			<Consumer>
				{value => `${value.username},年龄是${value.age}`}
			</Consumer>
			</h4>
		</div>
	)
}