文件结构
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'))
App.js
import React, {Component} from "react";
import Dome from './components/context'
export default class A extends Component{
render() {
return (
<div>
<Dome/>
</div>
)
}
}
components/context/index.jsx
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: 'james',age: 23}
render() {
const {username,age} = this.state
return (
<div className="parent">
<h2>我是A组件</h2>
<h3>我的用户名是:{username},年龄是:{age}</h3>
{/* 需要使用Provider的value属性,才能让B以及B以下的组件都能够接收值 */}
{/* 一次传多个值时,需要{}进行包裹 */}
<Provider value={{username,age}}>
<B/>
</Provider>
</div>
)
}
}
class B extends Component {
render() {
return (
<div className="child">
<h2>我是B组件</h2>
<C/>
</div>
)
}
}
// 类组件
class C extends Component {
// 必须使用改语句生命contextType才能接收MyContext的值
static contextType = MyContext
render() {
const {username,age} = this.context
return (
<div className="grand">
<h2>我是C组件</h2>
<h3>我从A组件接收到的用户名是:{username},年龄是:{age}</h3>
</div>
)
}
}
// //函数式组件,需要借用Consumer组件进行操作
// function C() {
// return (
// <div className="grand">
// <h2>我是C组件</h2>
// <h3>我从A组件接收到的用户名是:
// <Consumer>
// {
// value => {
// return `${value.username},年龄是:${value.age}`
// }
// }
// </Consumer>
// </h3>
// </div>
// )
// }
components/context/index.css
.parent {
width: 500px;
background-color: rgb(0, 255, 213);
padding: 10px;
}
.child {
width: calc(100% - 20px);
background-color: rgb(0, 162, 255);
padding: 10px;
}
.grand {
width: calc(100% - 20px);
background-color: rgb(212, 212, 212);
padding: 10px;
}
效果