理解
一种组件间通信方式,常用于【祖组件】与 【后代组件】间通信
使用
- 创建Context对象
const XxxContext = React.createContext()
- 渲染子组件时,外面包裹XxxContext.Provider,通过value属性给后代组件传值,
<xxxContext.Provider value={数据}>子组件</xxxContext.Provider>
- 后代组件读取数据:
//第一种方式:仅适用于类组件
static contextType = xxxContext //声明接收context
this.context //读取context中的value的数据
//第二种方式:函数组件与类组件都可以
<xxxContext.Consumer>
{
value => ( // value就是context中的value数据
要显示的内容
)
}
<xxxContext.Consumer>
注意
在应用开发中一般不用
context
,一般都使用它的封装react
插件