重温react-08(createContext使用方式)

react中的createContext使用方式

简介一下,就是组件之间可以互相通信的比较好用的传值方式,话不多说直接上代码。

以下介绍的是类组件中的方式,在函数组件中不是如此使用的。

定义一个通用的方法

import { createContext } from "react";
const Context = createContext();// Content有两个属性
//    1. Provider 数据提供者
//    2. Consumer 数据使用者const { Provider, Consumer } = Context;
export {Provider,Consumer
}

现在是数据提供者的页面代码

const data = {name: 'John Doe',age: 30,hobbies: ['reading', 'painting', 'traveling']
}
root.render(<React.StrictMode><Provider value={data}><App /></Provider></React.StrictMode>
);

就是把这个data传过去了,不论是子代组件还是孙子组件都可以使用这个传参方法,如果组件套的层级太深了的话,要一层一层传不方便,但是用这个方式就简单很多。

儿子组件使用方式(代码片段)

import React from 'react';
import { Consumer } from './context/index'
import LearnFunction04 from './LearnFunction04'; //  useEffect第二个参数的用法
export default function boxReact() {return (<div><Consumer>{(data) => {console.log(data);return <div>{data.name}</div>}}</Consumer> </div>)
}

孙子组件使用方式

import React, { Component } from 'react'
import {Consumer} from './context/index'
export default class LearnFunction04 extends Component {render() {return (<Consumer>{(data) => {return  <div>{data.name}</div>}}</Consumer>)}
}

后代所有组件的方式都是如同孙子组件的使用方式

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

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

相关文章

MathType7.6专业数学公式编辑器!与Word、PPT等常用软件无缝对接。

MathType&#xff0c;一款专业的数学公式编辑器&#xff0c;以其强大的功能和友好的用户界面&#xff0c;在科研、教学等领域广受欢迎。它支持丰富的数学符号和公式模板&#xff0c;满足不同用户的需求。同时&#xff0c;MathType还提供了多种输出格式&#xff0c;方便与其他文…

基于YOLOv9+pyside的安检仪x光危险物物品检测(有ui)

安全检查在公共场所确保人身安全的关键环节&#xff0c;不可或缺。X光安检机作为必要工具&#xff0c;在此过程中发挥着重要作用。然而&#xff0c;其依赖人工监控和判断成像的特性限制了其应用效能。本文以此为出发点&#xff0c;探索了基于Torch框架的YOLO算法在安检X光图像中…

在linux 下交叉编译gdb 8.1.1 ,生成 windows下的exe程序

在Linux环境下进行交叉编译,生成适用于Windows的可执行程序(.exe),需要使用交叉编译工具链。对于特定的GDB版本(如8.1.1),你需要确保有适用于目标平台(Windows)的交叉编译工具链。以下是一些基本步骤和考虑因素: 获取GDB源码:首先,需要下载GDB 8.1.1的源码包。你可…

《数据结构与算法基础 by王卓老师》学习笔记——类C语言有关操作补充

1.元素类型说明 2.数组定义 3.C语言的内存动态分配 4..C中的参数传递 5.传值方式 6.传地址方式 例子

【计算机网络】期末复习(2)

目录 第一章&#xff1a;概述 第二章&#xff1a;物理层 第三章&#xff1a;数据链路层 第四章&#xff1a;网络层 第五章&#xff1a;传输层 第一章&#xff1a;概述 三大类网络 &#xff08;1&#xff09;电信网络 &#xff08;2&#xff09;有线电视网络 &#xff0…

快速了解GPT-4o和GPT-4区别

GPT-4o简介 在5月14日的OpenAI举行春季发布会上&#xff0c;OpenAI在活动中发布了新旗舰模型“GPT-4o”&#xff01;据OpenAI首席技术官穆里穆拉蒂&#xff08;Muri Murati&#xff09;介绍&#xff0c;GPT-4o在继承GPT-4强大智能的同时&#xff0c;进一步提升了文本、图像及语…

px、em、rem、rpx 作用和用法详解

px px像素&#xff08;Pixel&#xff09;。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 IE无法调整那些使用px作为单位的字体大小&#xff1b; 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位&#xff1b; Firefox能够调整px和em&#xff…

JVM原理(四):JVM垃圾收集算法与分代收集理论

从如何判定消亡的角度出发&#xff0c;垃圾收集算法可以划分为“引用计数式垃圾收集”和“追踪式垃圾收集”两大类。 本文主要介绍的是追踪式垃圾收集。 1. 分代收集理论 当代垃圾收集器大多遵循“分代收集”的理论进行设计&#xff0c;它建立在两个假说之上&#xff1a; 弱分…

C++11中如何创建线程

在C11中&#xff0c;创建线程变得非常简单和标准化&#xff0c;因为C11引入了线程库&#xff08;<thread>&#xff09;。这个库提供了std::thread类&#xff0c;使得创建和管理线程变得更加直接和方便。 以下是如何在C11中创建线程的基本步骤&#xff1a; 包含线程库&a…

重建控制文件

----------------------------------------------------以下是单节点--------------------------------------------------- 一、现象 1、某次测试环境数据库重启&#xff0c;报如下错误 ORA-38760: This database instance failed to turn on flashback database 启动到mo…

C# 特性 Attribute 反射 Reflection 元数据 Metadata 未完

在C#中&#xff0c;元数据&#xff08;Metadata&#xff09;是指与程序代码本身相关的数据&#xff0c;这些数据提供了代码的额外信息&#xff0c;但并不直接影响代码的执行。元数据在.NET框架中扮演着重要的角色&#xff0c;以下是一些常见的元数据类型和它们的用途&#xff1…

vue插槽的简单使用

默认插槽 1.在Category中创建插槽 <slot>默认值<slot/> 2.在App中使用 <Category tittle"美食"> <ul ><li v-for"(l,index) in foods" :key"index">{{l}}</li></ul> </Category> 3.运行后的…

【IC验证】UVM实验lab05

1. 寄存器建模的要点和顺序 1.1 寄存器创建 定义单个uvm_reg&#xff0c;各个域的确定&#xff0c;并利用configure函数来配置属性&#xff1b; class ctrl_reg extends uvm_reg;uvm_object_utils(ctrl_reg)/*uvm_reg;uvm_mem;uvm_reg_map;uvm_reg_block都继承于uvm_object类…

八、浏览器同源策略

上一篇&#x1f449;: 浏览器垃圾回收机制 文章目录 浏览器同源策略1.同源策略的定义2.同源策略的作用3.同源策略的限制范围4.解决跨域方案汇总1.CORS&#xff08;跨源资源共享&#xff09;2.JSONP3.postMessage 跨域4.Nginx代理跨域5.Node.js中间件代理跨域6.document.domain…

【教学类65-04】20240625秘密花园涂色书04(通义万相)(图纸16:9,A4横板1张,一大168张纸168份)

背景需求 【教学类65-01】20240622秘密花园涂色书01&#xff08;通义万相&#xff09;&#xff08;A4横版2张&#xff0c;一大3小 38张纸76份&#xff09;-CSDN博客文章浏览阅读118次。【教学类65-01】20240622秘密花园涂色书01&#xff08;通义万相&#xff09;&#xff08;A…

老年人能力评估系统:在居家养老中的作用

随着人口老龄化趋势的加剧&#xff0c;居家养老成为了许多老年人的首选。为了满足居家养老中老年人能力评估的需求&#xff0c;提高评估质量和效果&#xff0c;老年人能力评估系统应运而生。本文将为您介绍老年人能力评估系统在居家养老中的作用&#xff0c;让您了解这个在居家…

Ubuntu 截图shutter,图像编辑 gimp,录屏kazam

1.截图&#xff1a; Shutter 安装shutter命令&#xff1a; sudo add-apt-repository ppa:shutter/ppasudo apt-get updatesudo apt-get install shutter 2.图片编辑&#xff1a;Gimp, Kolourpaint, Pinta gimp全名为&#xff1a;GNU Image Manipulation Program&#xff0c…

操作系统-文件的物理结构(文件分配方式)

文章目录 总览文件块和磁盘块连续分配顺序访问直接访问&#xff08;随机访问&#xff09;为什么连续分配同时支持这两种访问模式&#xff1f; 链接分配隐式链接显示链接小结索引分配链接方案多层索引混合索引小结 总结 总览 文件数据存放在外存中 文件块和磁盘块 文件内通过逻…

万字长文详解数据结构:树 | 第6章 | Java版大话数据结构 | 二叉树 | 哈夫曼树 | 二叉树遍历 | 构造二叉树 | LeetCode练习

&#x1f4cc;本篇分享的大话数据结构中&#x1f384;树&#x1f384;这一章的知识点&#xff0c;在此基础上&#xff0c;增加了练习题帮助大家理解一些重要的概念✅&#xff1b;同时&#xff0c;由于原文使用的C语言代码&#xff0c;不利于学习Java语言的同学实践&#xff0c;…

Linux中使用网络文件系统NFS挂载远程目录,对远程文件的本地化操作

目录 一、NFS及其在linux系统中的挂载 1、NFS概述 2、NFS挂载及其作用 &#xff08;1&#xff09;资源共享 &#xff08;2&#xff09;简化数据管理 &#xff08;3&#xff09;提高数据可用性 &#xff08;4&#xff09;灵活性 &#xff08;5&#xff09;访问控制 &am…