React第十九章(useContext)

useContext

useContext 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。设计的目的就是解决组件树间数据传递的问题。

在这里插入图片描述

用法

const MyThemeContext = React.createContext({theme: 'light'}); // 创建一个上下文function MyComponent() {const themeContext = useContext(MyThemeContext); // 使用上下文return (<div>{themeContext.theme}</div>);
}

参数

入参

  • context:是 createContext 创建出来的对象,他不保持信息,他是信息的载体。声明了可以从组件获取或者给组件提供信息。

返回值

  • 返回传递的Context的值,并且是只读的。如果 context 发生变化,React 会自动重新渲染读取 context 的组件

基本用法

我们编写一个传递主题的例子,
这个hook在18版本和19版本是有区别的。

  • 18版本演示

首先我们先通过createContext创建一个上下文,然后通过createContext创建的组件包裹组件,传递值。

被包裹的组件,在任何一个层级都是可以获取上下文的值,那么如何使用呢?

使用的方式就是通过useContext这个hook,然后传入上下文,就可以获取到上下文的值。

import React, { useContext, useState } from 'react';
// 创建上下文
const ThemeContext = React.createContext<ThemeContextType>({} as ThemeContextType);
// 定义上下文类型
interface ThemeContextType {theme: string;setTheme: (theme: string) => void;
}
const Child = () => {// 获取上下文const themeContext = useContext(ThemeContext);const styles = {backgroundColor: themeContext.theme === 'light' ? 'white' : 'black',border: '1px solid red',width: 100 + 'px',height: 100 + 'px',color: themeContext.theme === 'light' ? 'black' : 'white'}return <div><div style={styles}>child</div></div>
}const Parent = () => {// 获取上下文const themeContext = useContext(ThemeContext);const styles = {backgroundColor: themeContext.theme === 'light' ? 'white' : 'black',border: '1px solid red',width: 100 + 'px',height: 100 + 'px',color: themeContext.theme === 'light' ? 'black' : 'white'}return <div><div style={styles}>Parent</div><Child /></div>
}function App() {const [theme, setTheme] = useState('light');return (<div><button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>切换主题</button><ThemeContext.Provider value={{ theme, setTheme }}><Parent /></ThemeContext.Provider></div >);
}export default App;
  • 19版本演示

其实19版本和18版本是差不多的,只是19版本更加简单了,不需要再使用Provider包裹,直接使用即可。

import React, { useContext, useState } from 'react';
const ThemeContext = React.createContext<ThemeContextType>({} as ThemeContextType);
interface ThemeContextType {theme: string;setTheme: (theme: string) => void;
}const Child = () => {const themeContext = useContext(ThemeContext);const styles = {backgroundColor: themeContext.theme === 'light' ? 'white' : 'black',border: '1px solid red',width: 100 + 'px',height: 100 + 'px',color: themeContext.theme === 'light' ? 'black' : 'white'}return <div><div style={styles}>child</div></div>
}const Parent = () => {const themeContext = useContext(ThemeContext);const styles = {backgroundColor: themeContext.theme === 'light' ? 'white' : 'black',border: '1px solid red',width: 100 + 'px',height: 100 + 'px',color: themeContext.theme === 'light' ? 'black' : 'white'}return <div><div style={styles}>Parent</div><Child /></div>
}
function App() {const [theme, setTheme] = useState('light');return (<div><button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>切换主题</button><ThemeContext.Provider value={{ theme, setTheme }}> // [!code --]<ThemeContext value={{ theme, setTheme }}> // [!code ++]<Parent /></ThemeContext.Provider> // [!code --]<ThemeContext> // [!code ++]</div >);
}export default App;

注意事项

  • 使用 ThemeContext 时,传递的key必须为value
// 🚩 不起作用:prop 应该是“value”
<ThemeContext theme={theme}><Button />
</ThemeContext>
// ✅ 传递 value 作为 prop
<ThemeContext value={theme}><Button />
</ThemeContext>
  • 可以使用多个Context

如果使用多个Context,那么需要注意,如果使用的值是相同的,那么会覆盖。

const ThemeContext = React.createContext({theme: 'light'});function App() {return (<ThemeContext value={{theme: 'light'}}><ThemeContext value={{theme: 'dark'}}> {/* 覆盖了上面的值 */}<Parent /></ThemeContext></ThemeContext>)
}

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

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

相关文章

【密码学】AES算法

一、AES算法介绍&#xff1a; AES&#xff08;Advanced Encryption Standard&#xff09;算法是一种广泛使用的对称密钥加密&#xff0c;由美国国家标准与技术研究院&#xff08;NIST&#xff09;于2001年发布。 AES是一种分组密码&#xff0c;支持128位、192位和256位三种不同…

安卓FakeLocation模拟定位对WX小程序不生效

背景 Fake localtion模拟定位GPS 、 基站&#xff0c;对于某些地区活动消费券在WX H5 、小程序中不生效 设备环境 小米13PRO澎湃1 安卓14已ROOTMagisk面具 27Lsposed 1.9.2 Zygisk模式Guise 1.1.1 不生效场景 模拟GPS、基站&#xff0c;在百度地图&#xff0c;微信腾讯地区…

AIGC---------AIGC在数字孪生中的应用

跨越虚拟与现实&#xff1a;AIGC在数字孪生中的应用 引言 近年来&#xff0c;人工智能生成内容&#xff08;AIGC&#xff0c;Artificial Intelligence Generated Content&#xff09;与数字孪生&#xff08;Digital Twin&#xff09;的结合&#xff0c;成为科技界的热点。AIGC…

学习Guava库 学习实用示例 实例 核心提纲

学习Guava库 核心提纲: 1. 概览与入门 Guava库的介绍Guava的安装与依赖配置Guava的主要模块和功能概览 入门示例 2. 基本工具类 Preconditions&#xff1a;用于断言和参数检查Verify&#xff1a;用于验证对象状态 https://blog.csdn.net/ywtech/article/details/144491210 …

金仓数据库全攻略:简化部署,优化管理的全流程指南

金仓数据库 人大金仓&#xff08;KING BASE&#xff09;是一家拥有20多年数据库领域经验的公司&#xff0c;专注于数据库产品的研发和服务。公司曾参与多项国家级重大课题研究&#xff0c;如"863"计划、电子发展基金、信息安全专项等。其核心产品是金仓数据库管理系…

Python轻松获取抖音视频播放量

现在在gpt的加持下写一些简单的代码还是很容易的&#xff0c;效率高&#xff0c;但是要有一点基础&#xff0c;不然有时候发现不了问题&#xff0c;这些都需要经验积累和实战&#xff0c;最好能和工作结合起来&#xff0c;不然很快一段时间就忘的干干净净了&#xff0c;下面就是…

讯飞智文丨一键生成WordPPT

在当今数字化办公的浪潮中,Word和PPT已经成为职场人士日常工作的标配工具。然而,面对繁琐的内容编辑和格式调整任务,如何提升效率成了每个人的追求。而讯飞智文,一款结合人工智能技术的文字处理与演示文稿工具,正逐渐成为用户的得力助手。本文将详细介绍讯飞智文的功能特点…

2024数据库国测揭晓:安全与可靠的新标准,你了解多少?

2024年数据库国测的结果&#xff0c;于9月份的最后一天发布了。 对于数据库行业的从业者来说&#xff0c;国测是我们绕不过去的坎儿。那么什么是国测&#xff1f;为什么要通过国测&#xff0c;以及国测的要求有哪些&#xff1f; 这篇文章带大家一探究竟。 国测 自愿平等、客…

清理 zabbix 历史数据, 缩减 postgresql 空间

在 Zabbix 中使用 PostgreSQL 作为数据库后端时&#xff0c;随着监控数据的不断积累&#xff0c;数据库可能会变得非常大&#xff0c;从而导致存储空间紧张。为了清理 Zabbix 历史数据并缩减 PostgreSQL 空间&#xff0c;您可以按照以下步骤进行操作&#xff1a; 一、分析数据…

VMware ubuntu12.04怎么设置静态IP联网

记得刚开始学习嵌入式就是从ubuntu12.04的环境开始学习的C语言&#xff0c;当时没有弄清楚怎么设置静态IP联网&#xff0c;现在写一篇文章。 1.首先&#xff0c;关闭ubuntu的网络&#xff1b; 2.电脑使用的是wifi,将VMware桥接到该网卡上&#xff1b; 3.在虚拟机设置里面选择桥…

python 基于 docx 文件模板生成 docx 或 PDF 文件

需求背景 提供一个Word文档模板&#xff0c;使用python程序替换里边的占位符&#xff0c;替换内容包括文本和图片&#xff0c;然后输出docx或者PDF文件。 功能演示 输入示例 输出示例 实现程序 import os import shutil import subprocess import timefrom docx import Doc…

深入解析 Pytest 中的 conftest.py:测试配置与复用的利器

在 Pytest 测试框架中&#xff0c;conftest.py 是一个特殊的文件&#xff0c;用于定义测试会话的共享配置和通用功能。它是 Pytest 的核心功能之一&#xff0c;可以用于以下目的&#xff1a; 【主要功能】 1、定义共享的 Fixture &#xff08;1&#xff09;conftest.py 文件可…

【Python篇】PyQt5 超详细教程——由入门到精通(序篇)

文章目录 PyQt5 超详细入门级教程前言序篇&#xff1a;1-3部分&#xff1a;PyQt5基础与常用控件第1部分&#xff1a;初识 PyQt5 和安装1.1 什么是 PyQt5&#xff1f;1.2 在 PyCharm 中安装 PyQt51.3 在 PyCharm 中编写第一个 PyQt5 应用程序1.4 代码详细解释1.5 在 PyCharm 中运…

【Axure教程】动态统计字数

动态统计字数通常用于文本编辑、编程、社交媒体、写作工具、SEO优化、表单与调查以及数据分析等场景&#xff0c;帮助用户实时跟踪文字量&#xff0c;保证内容符合特定的格式或要求&#xff0c;提高工作效率和质量。 今天我们就来学习&#xff0c;怎么在Axure中制作能根据输入…

LeetCode 3266.K 次乘运算后的最终数组 II:堆(快速幂)

【LetMeFly】3266.K 次乘运算后的最终数组 II&#xff1a;堆&#xff08;快速幂&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/final-array-state-after-k-multiplication-operations-ii/ 给你一个整数数组 nums &#xff0c;一个整数 k 和一个整数 m…

【YashanDB知识库】oracle与yashanDB的jdbc返回常量列“0.00“的精度和刻度不一致

本文内容来自YashanDB官网&#xff0c;原文内容请见 https://www.yashandb.com/newsinfo/7610110.html?templateId1718516 问题现象 客户预期常量列"0.00"应该映射到java里的浮点类型&#xff0c;结果却是跑到整型。 1、应用的sql 2、应用的java代码 3、执行结果…

Ripro V5日主题 v8.3 开心授权版 wordpress主题虚拟资源下载站首选主题模板

RiPro主题全新V5版本&#xff0c;是一个优秀且功能强大、易于管理、现代化的WordPress虚拟资源商城主题。支持首页模块化布局和WP原生小工具模块化首页可拖拽设置&#xff0c;让您的网站设计体验更加舒适。同时支持了高级筛选、自带会员生态系统、超全支付接口等众多功能&#…

前端页面图片滑动验证

开源项目地址&#xff1a;monoplasty/vue3-slide-verify 安装命令&#xff1a; npm install --save vue3-slide-verify 在登录页面添加代码&#xff1a; <template> <!-- 登录验证码对话框 --> <el-dialog v-model"dialogVisible" title"验…

pyhton 批量往PDF文件指定位置里面填写数据

pyhton 批量往PDF文件指定位置里面填写数据 import PyPDF2 from PyPDF2 import PdfReader, PdfWriterdef modify_pdf(input_pdf_path, output_pdf_path, page_number, x, y, text):reader PdfReader(input_pdf_path)writer PdfWriter()for page in reader.pages:writer.add_p…

MySQL迁移SQLite 借助PYTHON脚本

使用 Python 脚本将 MySQL 数据库迁移到 SQLite 是一种灵活且强大的方法。 下面是一个基本的脚本示例&#xff0c;使用 pandas 和 sqlite3 库来实现这一过程。 这个脚本假设你已经安装了 pandas 和 mysql-connector-python 库。 步骤 安装必要的库: 如果尚未安装&#xff…