您现在的位置是:首页 > Javascript
当前栏目
React入门八:Context
2023-02-25 18:16:24 时间
这是我参与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:用来接收数据的
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项