web前端全系列 教程
1839个小节阅读:2244.1k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
创建Context对象
React.createContext(defaultValue)
xxxxxxxxxx
const MyContext = React.createContext(defaultValue);
Context
的Provider
组件
Contenxt的Provider组件用来提供其它组件要共享的数据。
设置value
属性来设置要共享的数据。
xxxxxxxxxx
<MyContext.Provider value={/* 某个值 */}>
提示:
我们把要使用共享数据的组件称为
消费组件
。
Class.contextType
为组件类添加contextType
属性,从而获取Context对象。
xxxxxxxxxx
MyClass.contextType = MyContext;
提示:
挂载在 class 上的
contextType
属性会被重赋值为一个由React.createContext()
创建的 Context 对象。这能让你使用this.context
来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它,包括 render 函数中。
xxxxxxxxxx
//MyContext.js
import React from "react";
export default React.createContext({name:'',account:'xxx'})
xxxxxxxxxx
//ContextTest.js
import React from 'react'
import MyContext from './MyContext'
import NavBar from './NavBar'
export default class ContextTest extends React.Component {
constructor(props) {
super(props)
this.state = { user: { name: '百战', account: 'baizhan' } }
}
render() {
return <div>
{/* 使用Provider组件提供数据 */}
<MyContext.Provider value={this.state.user }>
<NavBar />
</MyContext.Provider>
</div>
}
}
xxxxxxxxxx
//NabBar.js
import React, { Component } from 'react'
import UserInfo from './UserInfo'
export default class NabBar extends Component {
render() {
return (
<div style={{height:'50px',background:'#ccc',display:'flex',justifyContent:'space-around',alignItems:'center'}}>
NabBar的内容
<UserInfo />
</div>
)
}
}
xxxxxxxxxx
//UserInfo.js
import React, { Component } from 'react'
import MyContext from './MyContext'
export default class UserInfo extends Component {
render() {
console.log(this.context)
return (
<div>你好,欢迎 {this.context.account}</div>
)
}
}
//设置类的contentType属性,从而获取context对象
UserInfo.contextType=MyContext
实时效果反馈
1. 使用什么方式创建Context对象:
A React.Context
B React.createcontext()
C React.createContext()
D React.contextType
2. 消费组件使用什么方式获取Context对象:
A class.Context=MyContext
B React.contextType=MyContext
C class.contextType=MyContext
D class.contexttype=MyContext
答案
1=>C 2=>C