一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信
点击访问官网 Context
1、写在前面的使用总结
1) 创建Context容器对象:
const XxxContext = React.createContext()
2) 渲染子组时,外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据:
{/* Provider 的属性名是写死的,就是value,值可以随便传 */}
<xxxContext.Provider value={数据}>
子组件
</xxxContext.Provider>
3) 后代组件读取数据:
//第一种方式:仅适用于类组件
static contextType = xxxContext // 声明接收context(必须声明,不然不给context值)
this.context // 读取context中的value数据
//第二种方式: 函数组件与类组件都可以
<xxxContext.Consumer>
{
value => ( // value就是context中的value数据
要显示的内容
)
}
</xxxContext.Consumer>
2、注意
- 在应用开发中一般不用context, 一般都用它的封装react插件
3、类式 Demo
3.1、CODE
import React, { Component, createContext } from 'react'
// 创建Context对象
const MyContext = createContext()
export default class A extends Component {
state = {
name: '张三'
}
render() {
const { name } = this.state
return (
<div style={{
background: 'orange',
padding: 10
}}>
<h2>这是A组件</h2>
<h4>A组件用户名是:{name}</h4>
{/* Provider 的属性名是写死的,就是value,值可以随便传 */}
<MyContext.Provider value={name}>
<B />
</MyContext.Provider>
</div>
)
}
}
class B extends Component {
render() {
return (
<div style={{
background: 'skyblue',
padding: 10
}}>
<h2>这是B组件</h2>
<C />
</div>
)
}
}
class C extends Component {
// 声明我要获取MyContext的值(必须声明,不然不给context)
static contextType = MyContext
render() {
return (
<div style={{
background: 'gray',
padding: 10
}}>
<h2>这是C组件</h2>
<h4>B从A组件接收到的用户名是:{this.context}</h4>
</div>
)
}
}
3.2、Result
4、函数式 Demo
4.1、CODE
直接修改上面的Demo中的C组件
function C() {
return (
<div style={{
background: 'gray',
padding: 10
}}>
<h2>这是C组件</h2>
<MyContext.Consumer>
{
value => <h4>B从A组件接收到的用户名是:{value}</h4>
}
</MyContext.Consumer>
</div>
)
}
4.2、Result
- 桶3.2,略…