当前位置:网站首页>sibling component communication context
sibling component communication context
2022-08-03 16:40:00 【It's Zhang Yu Xiao Wanzi Duck】
Introduction to context
In normal use of react, data is transmitted from top to bottom. If data is stored in the state in the top-level component, without any third-party state management framework, you want to store data in the child component.The only way to get the data of the top-level components is to transfer the data layer by layer, even if the components between the two do not need the data at all, if the layer is deeper, the layer-by-layer data transfer can be described as a disaster, so the emergence of context is a disaster.To solve this problem, context is a way to pass values across levels,
context implementation steps
The role of the sibling component is similar to the middleman model, first son to father, then father to son
context state transfer data
First define an empty object, throw a React.createContext (default value), and assign the structure to get the Provider and Consumer components
The root component defines the provider that uses the Context where needed
Define contextType to get data, or you can use Consumer to get multiple content
Code display
context.js component
import React from 'react';//Define the data of an objectlet context = React.createContext(null);// throw the content of the objectexport const {Provider,Consumer} = context;
App.js component
Hierarchical relationship: App->Text->Span
We use the Provider component directly in the top-level component, and the Provider component has a value property for passing the actual value of the context.Then we can get these values to use in the underlying Child component.
import React from 'react';import './App.css';import { Provider, Consumer } from "./context/index";class App extends React.Component {constructor() {super();this.state = {color: "#FF0000"}}changeColor = () => {console.log(this.refs.colors.value)this.setState({color: this.refs.colors.value})}render() {let { color } = this.state;return ({ color: color, fontSize: "24px" }}> )}}function Text(props) {return (Text subcomponent
)}function Span(props) {return ({/* Accept data from Provider */}{(context) => {console.log(context)return (Hello React)}} )}export default App;
Use scenarios:
When we want to pass data across levels, and there are not many places to pass the data itself, we often don't want to introduce a more complex state management framework (such as redux, etc.) at this time, the context will be a verygood choice
边栏推荐
- TiKV & TiFlash accelerate complex business queries丨TiFlash application practice
- [redis] cache penetration and cache avalanche and cache breakdown solutions
- C语言01、数据类型、变量常量、字符串、转义字符、注释
- DAYU200 OpenHarmony标准系统HDMI全屏显示
- vector类
- Understand the recommendation system in one article: Outline 02: The link of the recommendation system, from recalling rough sorting, to fine sorting, to rearranging, and finally showing the recommend
- 使用uniapp 封装一个request 请求
- 请问下这个hologres维表是被缓存了么?怎么直接Finished了
- TypeScript的配置文件tsconfig.json
- Kubernetes 笔记 / 目录
猜你喜欢
随机推荐
【There is no tracking information for the current branch. Please specify which branch you want to 】
面了个腾讯35k出来的,他让我见识到什么叫精通MySQL调优
C专家编程 第3章 分析C语言的声明 3.9 轻松一下---驱动物理实体的软件
甲方不让用开源【监控软件】?大不了我自己写一个
MySQL窗口函数 PARTITION BY()函数介绍
Kubernetes 笔记 / 入门 / 生产环境 / 用部署工具安装 Kubernetes / 用 kubeadm 启动集群 / 安装 kubeadm
Cookie和Session的关系
C语言03、数组
建造者模式/生成器模式
20. Valid Parentheses
protobuf 中数据编码规则
数据中台“集存通用治”功能场景说明
vector类
leetcode SVM
使用uniapp 封装一个request 请求
【带你了解SDN和网络虚拟化】
通俗理解apt-get 和pip的区别是什么
从零开始搭建MySQL主从复制架构
C专家编程 第3章 分析C语言的声明 3.4 通过图标分析C语言的声明
MySQL查询语法