React Context详解使用过程

import React, { Component } from "react";
import "./index.css";
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>
        <B username={username} age={age}></B>
      </div>
    );
  }
}
class B extends Component {
  render() {
    console.log(this.props);
    const { username, age } = this.props;
    return (
      <div className="child">
        <h3>我是B组件</h3>
        <C username={username} age={age} />
      </div>
    );
  }
}
function C(props) {
	const { username, age } = props;
  return (
    <div className="grand">
      <h3>我是C组件</h3>
      <h4>
        我从A组件接收到的用户名:{username},年龄是{age}
      </h4>
    </div>
  );
}

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>
        //如果传的只有一个值例如username，应该式value={username},后面就是直接获取了，不需要再属性名取值了
        <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>
//   );
// }