React Context的使用方法

背景:在某些场景下,你想在整个组件树中传递数据,但却不想手动地在每一层传递属性,你可以直接在React中使用强大的contextAPI 解决上述问题

在一个典型的React 中,数据通过Props属性自下而上(由父及子)进行传递的,但这种做法对于某些类型的属性而言机器繁琐,(地区偏好,UI主题)这些属性是应用程序中许多组件都需要的。Context提供了一种在组件之间共享此值的方式,而不必显式的通过组件树逐层传递props

contextType只能用在类组件里
Consumer一般用在函数组件中

import React from './react';
import ReactDOM from './react-dom';
let ThemeContext = React.createContext();
/* let ThemeContext = React.createContext();
let { Provider, Consumer } = ThemeContext; */
//ThemeContext={Provider,Consumer} Consumer一般用在函数组件中
function Header(){return (<ThemeContext.Consumer>{value=>(<div style={{ margin: '10px', border: `5px solid ${value.color}`, padding: '5px' }}>头部</div>)}</ThemeContext.Consumer>)
}
class Main extends React.Component {static contextType = ThemeContextrender() {return (<div style={{ margin: '10px', border: `5px solid ${this.context.color}`, padding: '5px' }}>主体<Content /></div>)}
}
class Content extends React.Component {static contextType = ThemeContextrender() {return (<div style={{ margin: '10px', border: `5px solid ${this.context.color}`, padding: '5px'}}>内容<button onClick={()=>this.context.changeColor('red')}>变红</button><button onClick={()=>this.context.changeColor('green')}>变绿</button></div>)}
}
class Page extends React.Component {constructor(props) {super(props);this.state = { color: 'red' };}changeColor = (color) => {this.setState({ color });}render() {let contextValue = { color: this.state.color, changeColor: this.changeColor };return (<ThemeContext.Provider value={contextValue}><div style={{ margin: '10px', border: `5px solid ${this.state.color}`, padding: '5px', width: '200px' }}>主页<Header /><Main /></div></ThemeContext.Provider>)}
}
ReactDOM.render(<Page />, document.getElementById('root'));

react.js中相关代码

function createContext(){function Provider({value,children}){Provider._value = value;return children;}function Consumer({children}){return children(Provider._value);}return {Provider,Consumer};
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/701157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue页面基本增删改查

练手项目vue页面 新手前端轻喷&#xff1a; 效果如下 1、2两个部分组成&#xff1a; 对应代码中 element-ui中的 el-form 和 el-table 照着抄呗&#xff0c;硬着头皮来&#xff01; 建议&#xff1a;认真读一遍你用的组件 那上边简单得列表举例&#xff1a; 建议大家手敲一个…

Unity与Android交互通信系列(5)

在前述文章中&#xff0c;已经使用了AndroidJavaProxy代理接口&#xff0c;本节我们将详细的介绍AndroidJavaProxy代理的用法。正如其名&#xff0c;AndroidJavaProxy是一个代理&#xff0c;它在Android端代码与Unity端代码交互中起一个桥接作用。其一般用法为在Java代码中定义…

【深度学习】主要提出者【Hinton】中国大会最新演讲【通往智能的两种道路】

「但我已经老了&#xff0c;我所希望的是像你们这样的年轻有为的研究人员&#xff0c;去想出我们如何能够拥有这些超级智能&#xff0c;使我们的生活变得更好&#xff0c;而不是被它们控制。」 6 月 10 日&#xff0c;在 2023 北京智源大会的闭幕式演讲中&#xff0c;在谈到如…

一键生成PDF即刻呈现:轻松创建无忧体验

在信息爆炸的时代&#xff0c;我们每天都在与各种文件、资料打交道。无论是工作中的报告、合同&#xff0c;还是学习中的笔记、论文&#xff0c;如何高效、安全地管理这些珍贵的资料&#xff0c;成为了我们迫切的需求。幸运的是&#xff0c;随着科技的发展&#xff0c;我们不再…

SpringBoot Admin 详解

SpringBoot Admin 详解 一、Actuator 详解1.Actuator原生端点1.1 监控检查端点&#xff1a;health1.2 应用信息端点&#xff1a;info1.3 http调用记录端点&#xff1a;httptrace1.4 堆栈信息端点&#xff1a;heapdump1.5 线程信息端点&#xff1a;threaddump1.6 获取全量Bean的…

4、全球资产配置策略

2022年06月23日 传统的资产配置就是在债券类资产和国内股票类资产间以一定的比例进行调整。但是这类资产配置模式往往缺乏一类风险收益特征和国内资产接近但相关性较低、并且还可以有效分散国内市场风险的资产&#xff0c;而进行境外资产投资则可以很好地弥补这一空缺。实际上全…

Java学习——正则表达式

正则表达式是一种强大的文本处理工具&#xff0c;用于搜索、匹配、替换文本。它们定义了字符串的搜索模式&#xff0c;可以快速地检查一个字符串是否与某个模式匹配&#xff0c;提取匹配字符串&#xff0c;或者执行替换操作。正则表达式在文本编辑器、编程语言和数据库管理中广…

R3F(React Three Fiber)基础篇

之前一直在做ThreeJS方向&#xff0c;整理了两篇R3F&#xff08;React Three Fiber&#xff09;的文档&#xff0c;这是基础篇&#xff0c;如果您的业务场景需要使用R3F&#xff0c;您又对R3F不太了解&#xff0c;或者不想使用R3F全英文文档&#xff0c;您可以参考一下这篇&…

【Python笔记-设计模式】享元模式

一、说明 享元模式是一种结构型设计模式&#xff0c;它摒弃了在每个对象中保存所有数据的方式&#xff0c;通过共享多个对象所共有的相同状态&#xff0c;让你能在有限的内存容量中载入更多对象。 (一) 解决问题 旨在减少大量相似对象创建时的内存开销 (二) 使用场景 大量…

AI:136-基于深度学习的图像生成与风格迁移

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带关键代码,详细讲解供大家学习,希望…

github 笔记: fatal: Could not read from remote repository.

git clone 包时出现这两行报错 gitgithub.com: Permission denied (publickey). fatal: Could not read from remote repository.这意味着 SSH 认证失败了&#xff0c;通常是因为本地机器的 SSH 密钥未被 GitHub 账户识别/未正确设置。在终端中使用 ssh -T gitgithub.com 可以…

微服务三十五关

1.微服务有什么好处&#xff1f; 微服务优点很多&#xff0c;但是我们通常说一个东西好肯定会跟另一个东西比较&#xff0c; 通常说微服务好会和单体项目进行比较。以下是微服务相对于单体项目的一些显著好处&#xff1a; 首先&#xff0c;让我们讨论单体项目的一些主要缺点&a…

STM32_LCD1602_2_液晶屏初始化

HD44780的指令集及其设置说明 共11条指令&#xff1a; 清屏指令 指令功能指令编码执行时间/msRSR/WDB7DB6DB5DB4DB3DB2DB1DB0清屏00000000011.64 功能&#xff1a; 清除液晶屏&#xff0c;即将DDRAM的所有内容都写为“空”的ASCII的20H&#xff1b;光标归位&#xff0c;即将光…

多态与代码屎山

到底什么是多态呢?多态是面向未来的,比如企业采购为例: 一般分为线上合线下两种, 我们设计一个父类叫做"采购", 里面做一些共通的处理: 申请, 承认, 支付, 购买方式. 然后让各自的子类(线上,线下)实现自己的方法.实际调用过程中传入不同的对象就可以.到此为止项目开…

在线程调用的函数中使用pthread_exit同样会将线程退出

如上图所示&#xff0c;在func()函数中调用pthread_exit&#xff0c;同样可以退出当前线程&#xff1b; 类似的&#xff0c;如果func&#xff08;&#xff09;函数中调用exit&#xff0c;可以直接退出整个进程。 return 是返回到函数调用处&#xff1b; pthread_exit是退出…

KTV点歌系统vue+springboot音乐歌曲播放器系统

目前现有的KTV点歌系统对于用户而言其在线点歌流程仍然过于繁琐&#xff0c;对于歌曲而言其系统安全性并不能保障。同时整套系统所使用的技术相对较为落后&#xff0c;界面不能动态化展示。相比较于其它同类型网站而言不能体现技术先进性。 1.2 项目目标 KTV点歌系统的后台开发…

wpf 3d 后台加载模型和调整参数

下载了一个代码&#xff0c;加载obj模型&#xff1b;它的参数在xaml里&#xff0c;模型加载出来刚好&#xff1b; 然后加载另一个obj模型&#xff1b;加载出来之后大&#xff0c;偏到很高和左的位置&#xff1b; 它之前的摄像机位置&#xff0c; Position"9.94759830064…

Apache celeborn 安装及使用教程

1.下载安装包 https://celeborn.apache.org/download/ 测0.4.0时出现https://github.com/apache/incubator-celeborn/issues/835 2.解压 tar -xzvf apache-celeborn-0.3.2-incubating-bin.tgz 3.修改配置文件 cp celeborn-env.sh.template celeborn-env.shcp log4j2.xml.…

前后端分离Vue+nodejs校园论坛bbs系统x450z

开发语言 node.js 框架&#xff1a;Express 前端:Vue.js 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat 开发软件&#xff1a;VScode本论文拟采用计算机技术设计并开发的论坛bbs系统&#xff0c;主要是为用户提供服务。使得用户可以在系统上查看帖子信息、签到积分等…

jQuery中的事件与DOM操作

jQuery事件 jQuery事件是对JavaScript事件的封装,常用事件分类 基础事件 鼠标事件键盘事件window事件表单事件绑定事件与移除事件复合事件 鼠标光标悬停鼠标连续点击jQuery基础事件 鼠标事件 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件 下面是一个使用 Markdow…