React入门八：Context
这是我参与8月更文挑战的第七天，活动详情查看：8月更文挑战
\
1.思考：App组件要传递数据给Child组件，该如何处理
- 处理方式：使用props一层层组件往下传递（繁琐）
在这里插入图片描述
- 更好的办法：使用Context
- 作用：跨组件传递数据（比如：主题、语言）。直接从App组件传递到Child
在这里插入图片描述
2. Context使用步骤：
- 调用React.createContext()创建Provider(提供数据)和Consumer(消费数据)两个组件
const {Provider,Consumer} = React.createContext()- 使用Provider组件作为父节点
<Provider>
<div className="App">
<Child1/>
</div>
</Provider>- 设置value属性，表示要传递的数据
<Provider value="pink">- 调用Consumer组件接收数据
<Consumer>
{/* 回调 */}
{
data => <span>{data}</span>
}
</Consumer>3. 完整代码：
// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 创建context得到两个组件
const { Provider, Consumer } = React.createContext()
class App extends React.Component {
render() {
return (
<Provider value="pink">
<div className="app">
<Node />
</div>
</Provider>
)
}
}
const Node = props => {
return (
<div className="node">
<SubNode />
</div>
)
}
const SubNode = props => {
return (
<div className="subnode">
<Child />
</div>
)
}
const Child = props => {
return (
<div className="child">
<Consumer>
{/* 回调 */}
{
data => <span>{data}</span>
}
</Consumer>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))4. 总结：
- 如果两个组件嵌套多层 可以使用Context实现组件通讯
- Context提供两个组件：Provider 和 Consumer
- Provider ：用来提供数据
- Consumer：用来接收数据的
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-08-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录