重温react-08

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/bicheng/36305.shtml

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

相关文章

论文学习 --- RL Regret-based Defense in Adversarial Reinforcement Learning

前言 个人拙见,如果我的理解有问题欢迎讨论 (●′ω`●) 原文链接:https://www.ifaamas.org/Proceedings/aamas2024/pdfs/p2633.pdf 研究背景 深度强化学习(Deep Reinforcement Learning, DRL)在复杂和安全关键任务中取得了显著成果,例如自动驾驶。然而,DRL策略容易受…

【杂记-浅谈IPv6过渡技术之6to4网络技术】

IPv6过渡技术之 6to4网络技术 一、6to4网络概述二、6to4网络配置 一、6to4网络概述 6to4是一种IPv6转换技术&#xff0c;它允许IPv6流量通过IPv4网络传输。6to4网络的地址可以表示为2002:IPv4地址::/48&#xff0c;其中前48位&#xff08;2002:a.b.c.d&#xff09;由分配给路由…

python调用c++ ctype list传数组与for if 列表推导式

python调用c ctype list传数组 关于ctype与python list的转换很简单&#xff0c;大家记住下面两条就够用了&#xff0c;后面是练习 list传进C数组 import numpy as np from ctypes import * mylist [101, -101, ..., 101, -101]##your list mycbytearray (c_byte * len(my…

优刻得首个「国产千卡智算集群」落地,支持智源千亿大模型训练

在人工智能引领的时代浪潮中&#xff0c;算力已成为技术进步与创新的核心驱动力。面对当下AI算力需求的飙升、高端AI芯片供应受限的挑战&#xff0c;加之OpenAI带来的技术封锁&#xff0c;唯有坚定不移的发展自主可控的国产技术方案&#xff0c;持续壮大国产智算集群规模&#…

在postgrel中使用hints

在 PostgreSQL 中,可以使用查询提示(Query Hints)来影响查询优化器的行为,但需要注意的是,PostgreSQL 并不像一些商业数据库那样有丰富的提示语法,而是提供了一些基本的方式来引导优化器。 使用查询提示的基本方式 使用 /*+ … / 注释提示: PostgreSQL 支持在 SQL 查询…

参数调优论文

基于Java EE的性能调优方法研究 - 中国知网 (cnki.net) 基于机器学习的Hadoop参数调优方法 - 中国知网 (cnki.net) 基于机器学习的数据库系统自动调参研究 - 中国知网 (cnki.net) 基于强化学习的文件系统性能自动调优及参数安全评估技术 - 中国知网 (cnki.net) 基于贝叶斯优…

如何在ArcGIS Pro中提取行政区划

我们在《2024版有审图号的SHP行政区划》一文中&#xff0c;为你分享过全国省市县级的行政区划。 现在再为你分享一下&#xff0c;如何在ArcGIS Pro中提取目标范围行政区划的方法&#xff0c;你还可在以文末查看领取该行政区划数据的方法。 直接选择 在菜单栏上点击一下选择下…

这谁顶得住啊!AI绘画模型竟然可以画出质量逼真的黑丝!

今天看到一个有趣的AI绘画玩法&#xff0c;用SD画黑丝&#xff01;话不多说&#xff0c;开始今天的实战演练。 首先做好准备工作&#xff1a;部署好本地Stable Diffuison 然后就轮到今天的主角上场了 黑丝Lora模型&#xff1a;perfectpantyhose 这是一款叫perfectpantyhose…

【最佳实践】前端如何搭建自己的cli命令行工具,让自己编码的时候如虎添翼

作为前端开发人员&#xff0c;搭建自己的前端CLI工具是一个有趣且有意义的事情。以下是一篇详细的教程&#xff0c;包括使用场景和案例。 使用场景 假设你是一个前端团队的一员&#xff0c;需要频繁地在不同的项目中执行一些标准化的任务&#xff0c;比如&#xff1a; 根据模…

重建大师引擎数0,本地引擎设置改不了,空三在跑,这样是正常的吗?

答&#xff1a;任务目录和引擎监控目录并没有按照网络集群设置&#xff0c;需要调整为网络路径。 重建大师是一款专为超大规模实景三维数据生产而设计的集群并行处理软件&#xff0c;输入倾斜照片&#xff0c;激光点云&#xff0c;POS信息及像控点&#xff0c;输出高精度彩色网…

TikTok API接口——获取视频评论信息

一、引言 TikTok&#xff0c;作为全球最受欢迎的短视频社交平台之一&#xff0c;不仅为用户提供了展示才华和分享生活的舞台&#xff0c;也为品牌和企业提供了与年轻用户互动的新渠道。在这个信息爆炸的时代&#xff0c;了解用户的声音、掌握舆论动向显得尤为重要。通过TikTok…

alibaba easyexcel 导出excel使用

需求 传统导出&#xff0c;一般都是通过Workbook > Sheet > Row > Cell 获取详细Cell 设置值&#xff0c;比较麻烦&#xff0c;偶然遇到alibaba easyexcel 直接通过注解设置哪些需要导出 哪些忽略&#xff0c;发现特别好用。 pom依赖 <dependency><groupId…

千年织锦:中国古代包文化的辉煌历程与现代传承

追溯至远古&#xff0c;我们的祖先就开始利用自然界的恩赐——皮革、植物纤维等&#xff0c;制作出最原始的包袋。随着时间的推移&#xff0c;技艺的提升&#xff0c;包的材质逐渐丰富起来&#xff0c;从粗糙到精致&#xff0c;从简单到复杂&#xff0c;每一次材质的革新都是人…

CentOS 7.9 CDH6.3.2集群生产环境实战部署指南

一、环境准备 1、系统环境&#xff1a; # cat /etc/os-release 2、准备工作&#xff1a; 部署资源分配 节点centos 7.9&#xff08;生产&#xff09;节点规划Postgresql部署组件备注pgsql32c、128G、2TB国产数据库Postgresql&#xff08;翰高&#xff09;可根据实际情况调整…

Wordpress图像编辑插件-palleon v3.8.1中文版语言包

Palleon是一个强大的WordPress图像编辑器&#xff0c;可以与您的WordPress网站无缝集成&#xff0c;让您快速高效地工作。它拥有为你的WordPress网站创建令人惊叹的图像所需的一切。 Palleon让您完全控制图像&#xff0c;允许您逐个像素进行更改。您可以轻松地裁剪、调整图像大…

漏洞利用开发基础学习记录

文章目录 简介Win32缓冲区溢出内容难点 SEH 溢出内容难点 Egg Hunters内容难点 Unicode 溢出内容难点 x86-64 缓冲区溢出内容难点 参考资料 简介 本文基于ERC.Xdbg漏洞分析文章进行初步归纳整理&#xff0c;主要有Win32 缓冲区溢出、SEH 溢出、Egg Hunters、Unicode 溢出、x86…

基于盲信号处理的人声分离

1.问题描述 在实际生活中&#xff0c;存在一种基本现象称为“鸡尾酒效应”&#xff0c;该效应指即使在非常嘈杂的环境中&#xff0c;人依然可以从噪声中提取出自己所感兴趣的声音。 在实际应用中&#xff0c;我们可能需要对混合的声音进行分离&#xff0c;此时已知的只有混合…

规上!西安市支持培育商贸企业达限纳统应统尽统申报奖励补助要求政策

西安市支持培育商贸企业达限纳统应统尽统工作方案 为加快培育消费市场主体&#xff0c;支持商贸企业扩大经营、做大做强&#xff0c;指导企业达限纳统、应统尽统&#xff0c;不断扩大我市限额以上商贸企业数量规模&#xff0c;促进全市经济社会高质量发展&#xff0c;结合我市…

springboot 集成阿里云 OSS

引入依赖 <!-- 阿里云oss依赖 --> <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.9.1</version> </dependency><?xml version"1.0" encoding"…

技术前瞻:华为鸿蒙HarmonyOS NEXT仓颉语言Beta招募亮点提前曝光

在科技迅猛发展的今天&#xff0c;华为的每一步创新都备受瞩目。6月21日&#xff0c;华为再次引领风潮&#xff0c;正式发布了自研的仓颉编程语言&#xff0c;并宣布开启HarmonyOS NEXT 仓颉语言开发者预览版Beta招募活动。这不仅是华为技术实力的展示&#xff0c;更是对开发者…