共计 964 个字符,预计需要花费 3 分钟才能阅读完成。
对于 context 概念解释起来很绕, 很多性能也不罕用, 就简略解释一下最罕用的办法
react 中跨组件通信能够通过 props 逐层传递或者 context 创建对象进行数据传递,const name=React.createContext('name') 再通过订阅取值
上代码~~~
// 创立 context 对象
const MyContext=React.createContext('getText')
// 根组件
class ContextCom extends Component {
state = {
name:'我是大白白',
level:999,
content:'你好~~~~ 我是子组件 2'
}
render() {
return (
<div>
{/* 订阅 context 给 state 赋值 */}
<MyContext.Provider value={this.state}>
<Page/>
</MyContext.Provider>
</div>
);
}
}
// 父组件
class Page extends Component {state = {}
render() {
return (
<div>
<div>
类子组件
<PageHead/>
</div>
<div>
函数子组件
<Content/>
</div>
<div> 我是内容~~~~</div>
</div>
);
}
}
// 子组件 1 类组件
class PageHead extends Component {state = {}
render() {console.log(this.context)
return (
<div>
<h2>name:{this.context.name}</h2>
<h2>level:{this.context.level}</h2>
</div>
);
}
}
// 给 PageHead 的 contextType 赋值
PageHead.contextType=MyContext
// 子组件 2 函数组件
function Content(){
return(
// 函数组件 取值用 Consumer
<MyContext.Consumer>
{
value=>{
return(
// ** 留神 函数组件中取值为 value.
<div> 内容:{value.content}</div>
)
}
}
</MyContext.Consumer>
)
}
export default ContextCom;
分享结束 感激浏览
正文完