react useContext 用法

1 创建createContext

import React, { useContext, useEffect, useState } from 'react'

const GlobalContext = React.createContext()

GlobalContext 作为提供者

export default function App(){

  const [filmList,setfilmList] = useState([]);

  const [info,setinfo] = useState('');

  useEffect(()=>{

    return()=>{

      axios.get(`/maizuo.json`).then(res=>{

        setfilmList(res.data)

      })

    }

  },[])

  return (

//GlobalContext 作为提供者

    <GlobalContext.Provider value={{

      call:'打电话',

      sms:'短信服务',

      info:info,

      changeInfo:(value)=>{

        setinfo(value)

      }

    }}>

      <div>

        {

          filmList.map(item=>

            <FilmItem key={item.filmId} {...item}></FilmItem>

          )

        }

        <FileDetail></FileDetail>

      </div>

    </GlobalContext.Provider>

  )

}

3 通过 useContext(GlobalContext) 可以直接只用提供者属性和方法

function FilmItem(props){

  let { name, poster, grade,synopsis } = props;

  const value = useContext(GlobalContext)

  console.log(value,'--------123')

  return <div onClick={()=>{

//使用提供者方法

    value.changeInfo(synopsis)

   }}>

    <h4>{name} </h4>

    <div style={{display:'flex',alignItems:'center'}}>

     

      <div>观众评分: {grade} </div>

      <img src={poster} style={{width:'50px',height:'50px;',marginLeft:'10px'}} alt='alt'></img>

    </div>

  </div>

}

function FileDetail(){

  const value = useContext(GlobalContext);

  return <div className='filedetail'>

//使用提供者属性

  detail=== { value.call } == { value.info }

</div>

}

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

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

相关文章

SQL注入漏洞解析--less-7

我们先看一下第七关 页面显示use outfile意思是利用文件上传来做 outfile是将检索到的数据&#xff0c;保存到服务器的文件内&#xff1a; 格式&#xff1a;select * into outfile "文件地址" 示例&#xff1a; mysql> select * into outfile f:/mysql/test/one f…

Vue源码系列讲解——实例方法篇【一】(数据相关方法)

目录 0. 前言 1. vm.$watch 1.1 用法回顾 1.2 内部原理 2. vm.$set 2.1 用法回顾 2.2 内部原理 3. vm.$delete 3.1 用法回顾 3.2 内部原理 0. 前言 与数据相关的实例方法有3个&#xff0c;分别是vm.$set、vm.$delete和vm.$watch。它们是在stateMixin函数中挂载到Vue原…

【OnlyOffice】 桌面应用编辑器,版本8.0已发布,PDF表单、RTL支持、Moodle集成、本地界面主题

ONLYOFFICE桌面编辑器v8.0是一款功能强大、易于使用的办公软件&#xff0c;适用于个人用户、企业团队和教育机构&#xff0c;帮助他们高效地处理文档工作并实现协作。无论是在Windows、macOS还是Linux平台上&#xff0c;ONLYOFFICE都能提供无缝的编辑和共享体验。 目录 ONLYOFF…

ESP32语音转文字齐护百度在线语音识别

一、导入(10分钟&#xff09; 学习目的 二、新授(70分钟) 1.预展示结果(5分钟) 2.本节课所用的软硬件(5分钟) 4.图形化块介绍(10分钟) 5.单个模块的简单使用(10分钟) 6.在线语音转换工具逻辑分析(10分钟) 7.在线语音转换工具分步实现(30分钟) 三、巩固练习(5分钟) 四、课堂小结…

腾讯云4核8G的云服务器性能水平?使用场景说明

腾讯云4核8G服务器适合做什么&#xff1f;搭建网站博客、企业官网、小程序、小游戏后端服务器、电商应用、云盘和图床等均可以&#xff0c;腾讯云4核8G服务器可以选择轻量应用服务器4核8G12M或云服务器CVM&#xff0c;轻量服务器和标准型CVM服务器性能是差不多的&#xff0c;轻…

【办公类-21-04】20240227单个word按“段落数”拆分多个Word(三级育婴师操作参考题目 有段落文字和表格 1拆13份)

作品展示 背景需求&#xff1a; 最近学育婴师&#xff0c;老师发了一套doc操作参考 但是老师是一节节授课的&#xff0c;每节都有视频&#xff0c;如果做在一个文档里&#xff0c;会很长很长&#xff0c;容易找不到。所以我需要里面的单独文字的docx。 以前的方法是 1、打开源…

Android studio 六大基本布局详解

Android studio 六大基本布局详解 一、Android studio1.Android studio简介2.架构组成3.地址3.1 [官网地址](https://developer.android.google.cn/)3.2 [官方下载地址](https://developer.android.google.cn/studio?hlzh-cn) 二、Android studio六大基本布局详解1.Android六大…

连接未来:嵌入式系统在物联网时代的应用

连接未来&#xff1a;嵌入式系统在物联网时代的应用 随着物联网技术的不断发展&#xff0c;嵌入式系统在物联网时代扮演着至关重要的角色。嵌入式系统作为连接物理世界和数字世界的桥梁&#xff0c;为物联网的实现提供了技术支持和基础设施。以下将从几个方面探讨嵌入式系统在…

【JavaEE】_前端POST请求借助form表单向后端传参

目录 1. 前端POST请求借助form表单向后端传参 2. 关于parameter方法获取参数的优先性问题 前端向后端传参通常有三种方法&#xff1a; 第一种&#xff1a;使用GET请求的query string部分向后端传参&#xff1a; 本专栏中已经详述了前端使用GET请求的query string向后端传参…

在本地运行 LLMs 的 6 种方法

商业人工智能和大型语言模型 (LLM) 有一个很大的缺点&#xff1a;隐私。在处理敏感数据或专有数据时&#xff0c;我们无法从这些工具中获益。因此&#xff0c;我们需要了解如何在本地运行私人 LLM。开源模型提供了一种解决方案&#xff0c;但它们也有自己的挑战和优势。 设定期…

网安入门18-XSS(靶场实战)

HTML实体化编码 为了避免 XSS 攻击&#xff0c;会将<>编码为<与>&#xff0c;这些就是 HTML 实体编码。 编码前编码后不可分的空格 < (小于符号)< > (大于符号)> & (与符号)&amp;″ (双引号)&quot;’ (单引号)&apos;© (版权符…

计算机网络—ENSP常用指令

system-view ——用用户模式切换到系统配置模式 display this ——显示当前位置的设置信息&#xff0c;很方便了解系统设置 display 端口 ——显示端口的相关信息 shutdown ——当进入了一个端口后&#xff0c;使用shutdown可以关闭该端口 undo 命令 ——执行与命令相反的操作&…

微服务-商城订单服务项目

文章目录 一、需求二、分析三、设计四、编码4.1 商品服务4.2 订单服务4.3 分布式事务4.4 订单超时 商品、购物车 商品服务&#xff1a; 1.全品类购物平台 SPU:Standard Product Unit 标准化产品单元。是商品信息聚合的最小单位。是一组可复用、易检索的标准化信息的集合&#x…

[Flutter]设置应用包名、名称、版本号、最低支持版本、Icon、启动页以及环境判断、平台判断和打包

一、设置应用包名 在Flutter开发中&#xff0c;修改应用程序的包名&#xff08;也称作Application ID&#xff09;涉及几个步骤&#xff0c;因为包名是在项目的Android和iOS平台代码中分别配置的。请按照以下步骤操作&#xff1a; 1.Android Flutter工程中全局搜索替换包名 …

【Django】model模型—字段关联关系:多对多

多对多 例子&#xff1a;如果 Pizza 含有多种 Topping &#xff08;配料&#xff09; – 也就是一种 Topping 可能存在于多个 Pizza 中&#xff0c;并且每个 Pizza 含有多种 Topping。 from django.db import models# 配料 class Topping(models.Model):# ...passclass Pizza…

企业网络布局的新宠——SD-WAN

在数字化转型的浪潮下&#xff0c;企业对网络的需求日益复杂和多样化。面对分支机构间的协作需求和不断增长的网络流量&#xff0c;企业亟需一种更加高效、灵活且成本可控的组网方案。SD-WAN&#xff08;软件定义广域网络&#xff09;正是在这样的背景下应运而生&#xff0c;成…

【漏洞复现】大华智慧园区综合管理平台信息泄露漏洞

Nx01 产品简介 大华智慧园区综合管理平台是一款综合管理平台&#xff0c;具备园区运营、资源调配和智能服务等功能。该平台旨在协助优化园区资源分配&#xff0c;满足多元化的管理需求&#xff0c;同时通过提供智能服务&#xff0c;增强使用体验。 Nx02 漏洞描述 大华智慧园区…

FLIP27-Source

1.官方设计 1.1.分配读取拆分 Source通常有两个核心的部件&#xff1a;当前的Source接口就是用来创建SplitEnumerator和Reader的工厂类 SplitEnumerator: 分片发现和分配&#xff08;分片即文件、分区等&#xff09;&#xff0c;目前只运行一次&#xff08;应该可以重复调用…

主题公园保管资产难?三防加固平板对此说不!

主题公园是一个活跃&#xff0c;快节奏的环境&#xff0c;主题公园最重要的资产之一是他们的表演者和每天制作的节目。但是检查道具以及寻找服装的去向是一项艰巨的任务&#xff1b;如果没有适当的系统和流程&#xff0c;可能会导致资产损失和材料放错位置&#xff0c;最终导致…

【大厂AI课学习笔记NO.51】2.3深度学习开发任务实例(4)计算机视觉实际应用的特点

今天考试通过腾讯云人工智能从业者TCA级别的认证了&#xff01; 还是很开心的&#xff0c;也看不到什么更好的方向&#xff0c;把一切能利用的时间用来学习&#xff0c;总是对的。 我把自己考试通过的学习笔记&#xff0c;都分享到这里了&#xff0c;另外还有一个比较全的思维…