4.react useContext使用与常见问题

news2024/9/30 13:15:42
1. 在函数组件实现跨组件通信的方式
2. 注册Context将value传递给子组件

let MyContext = React.createContext('默认值');
<MyContext.Provider value={} >
let value = useContext(MyContext)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style></style>
  <script src="../react.development.js"></script>
  <script src="../react-dom.development.js"></script>
  <script src="../babel.min.js"></script>
  <script src="../lodash.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    // 实现三层组件的跨组件通信
    let Welcome = (props) => {  
      return (
        <div>
          hello Welcome
          <MyContext.Provider value="welcome的问候~~~">
            <Head />
          </MyContext.Provider>
        </div>
      );
    }
    let Head = () => {
      return (
        <div>
          hello Head
          <Title />
        </div>
      );
    }
    let Title = () => {
      let value = useContext(MyContext);
      return (
        <div>
          hello Title, { value }
        </div>
      );
    }
    
    let element = (
      <Welcome />
    );
    root.render(element);
  </script>
</body>

</html>

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

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

相关文章

【正点原子STM32连载】第十五章 窗口看门狗实验 摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html# 第十…

认识Mybatis并实现增删查改

目录 一.Mybatis特性 二.常见持久层技术的比较 三.搭建Mybaits环境 四.使用Mybatis 五.通过Mybatis实现增删改 六.实现数据库的查询操作 一.Mybatis特性 定制化SQL&#xff1a;MyBatis允许开发人员编写、优化和管理自定义的SQL语句&#xff0c;可以满足复杂查询和存储过程等…

Vitepress

Vitepress 版本&#xff1a;1.0.0-rc.1 这里使用在Vue3组件库中作为项目文档说明使用&#xff0c;另外版本见差异有点大&#xff0c;如版本不一致请参照官方文档 1、安装&初始化 1.1、安装 yarn add vitepress1.0.0-rc.11.2、初始化 PS D:\WebstromProject\chenxing>…

CloudQuery实战 | 谁说没有一款一体化数据库操作管控云平台了?

文章目录 CloudQuery询盾的地址CloudQuery主页统一入口数据库归纳SQL编辑器权限管控审计中心数据保护数据变更 CloudQuery文档中心了解CloudQuery快速入门安装步骤社区版v2.1.0操作手册1数据查询更新日志 CloudQuery社区和活动 CloudQuery线上实战线上实战主页面展示及数据操作…

CAD哪个版本最好用?学习一下CAD版本转换方法

CAD即计算机辅助设计&#xff0c;是一个制图软件&#xff0c;用于绘制建筑、机械、电子等领域的图纸。CAD文件通常被称为“图纸”或“工程图”。 CAD文件通常在以下方面使用&#xff1a; 1. 建筑&#xff1a;建筑师使用CAD文件来创建建筑物的平面图、立体图和剖面图。 2. 机…

Docker部署LNMP

Docker部署LNMP 一、安装docker1.安装docker2.镜像下载 二、部署MySQL1.获取镜像2.创建启动容器创建启动容器 huahua_mysql 三、部署PHP1.获取镜像2.创建容器3.查看信息 四、安装nginx1.获取镜像2.创建运行容器3.修改nginx配置文件 五、总结1. 安装Docker和Docker Compose&…

IO模型(阻塞IO、非阻塞IO、IO多路复用)

1.阻塞IO&#xff1a;最常用&#xff0c;最简单&#xff0c;效率最低 2.非阻塞 IO--->fcntl&#xff1a;获取或设置fd所指定的文件描述符的属性 箭头地方二选一 3.IO多路复用&#xff1a;允许同时对多个IO进行控制 select&#xff1a;内核同时检测多个IO&#xff0c;一…

金额千位符自定义指令

自定义指令文件 moneyFormat.js /*** v-money 金额千分位转换*/export default {inserted: inputFormatter({// 格式化函数formatter(num, util) {if(num null || num || num undefined || typeof(num) undefined){return }if(util 万元 || util 万){return formatMone…

SHELL 基础 显示字符颜色, 修改历史命令,Linux里的命令 执行顺序

echo 打印命令 &#xff1a; 显示字符串 &#xff1a; [rootserver ~]# echo this is SHELL language this is SHELL language [rootserver ~]# echo this is SHELL language this is SHELL language [rootserver ~]# echo "this is SHELL language" this is SH…

vue 使用nvm控制node 版本,随意切换 node 版本

1.nvm 下载安装 https://github.com/coreybutler/nvm-windows/releases 找自己版本 1.安装版本 nvm list available // 查看所有node 版本 nvm install 版本号 // 安装指定版本号2.nvm 列表展示 nvm list //展示所有版本号3.nvm 切换环境 nvm use 版本号 // 切换版本4.…

星际争霸之小霸王之小蜜蜂(四)--事件监听-让小蜜蜂动起来

目录 前言 一、监听按键并作出判断 二、持续移动 三、左右移动 总结&#xff1a; 前言 今天开始正式操控我们的小蜜蜂了&#xff0c;之前学java的时候是有一个函数监听鼠标和键盘的操作&#xff0c;我们通过传过来不同的值进行判断&#xff0c;现在来看看python是否一样的实现…

框架分析(1)-IT人必须会

框架分析&#xff08;1&#xff09;-IT人必须会 专栏介绍当今主流框架前端框架后端框架移动应用框架数据库框架测试框架 Angular关键特点和功能&#xff1a;组件化架构双向数据绑定依赖注入路由功能强大的模板语法测试友好 优缺点分析优点缺点 总结 专栏介绍 link 主要对目前市…

计算机竞赛 协同过滤电影推荐系统

文章目录 1 简介1 设计概要2 课题背景和目的3 协同过滤算法原理3.1 基于用户的协同过滤推荐算法实现原理3.1.1 步骤13.1.2 步骤23.1.3 步骤33.1.4 步骤4 4 系统实现4.1 开发环境4.2 系统功能描述4.3 系统数据流程4.3.1 用户端数据流程4.3.2 管理员端数据流程 4.4 系统功能设计 …

Datawhale 北邮分部成立了!

Datawhale分部 联合发起&#xff1a;陈玉立、陈逸涵、夏镇、李泽钜、邢植尧 蓟门以南&#xff0c;明光之北。杏坛向西&#xff0c;城垣东望。厚德博学&#xff0c;敬业乐群。 BYR&#xff0c;Datawhale北京邮电大学分部&#xff08;北邮AI俱乐部&#xff09;来啦&#xff01; …

微信好友恢复大师两招教你找回微信好友

在使用微信的时候&#xff0c;一些小伙伴可能没有给好友备注的习惯&#xff0c;所以很容易在清理“僵尸好友”时会不小心误删。如果您没有保存对方的联系方式&#xff0c;并且你们之间也没有共同好友&#xff0c;那么该如何重新加回好友呢&#xff1f;今天&#xff0c;小编就要…

Springboot 自定义 Mybatis拦截器,实现 动态查询条件SQL自动组装拼接(玩具)

前言 ps&#xff1a;最近在参与3100保卫战&#xff0c;战况很激烈&#xff0c;刚刚打完仗&#xff0c;来更新一下之前写了一半的博客。 该篇针对日常写查询的时候&#xff0c;那些动态条件sql 做个简单的封装&#xff0c;自动生成&#xff08;抛砖引玉&#xff0c;搞个小玩具&a…

【已解决】Please install Node.js and npm before continuing installation.

给juopyter lab安装插件时报这个错 原因是&#xff0c;conda本身有nodejs&#xff0c;但是版本很低&#xff0c;只有0.几 所以需要卸载掉原来的nodejs&#xff0c;重新安装10版本以上的nodejs # 卸载命令 pip uninstall nodejs # 安装命令 conda install nodejs14.7.0 -c cond…

从入门到精通:微信小程序跳转页面的实用指南

前言 微信小程序中页面跳转方法的灵活运用不仅可以提升用户体验&#xff0c;还能为应用增添更多创意和吸引力。本文将为大家详细介绍微信小程序跳转页面的方法&#xff0c;让你的应用与众不同&#xff0c;为用户带来全新的体验。 方式一&#xff1a;wx.navigateTo 保留当前页面…

第1步---MySQL安装和配置

第1步---MySQL安装和配置 1.下载地址 MySQL :: Download MySQL Community Server (Archived Versions) 直接下载zip形式的就可以。 2.在bin的同级目录下常见my.ini文件。 输入下面的内容 my.ini中的文本&#xff1a; [mysqld] #设置3306端口 port3306 character-set-server…

DELL R740 R750服务器安装Windows 11

正常安装出现如下 2、同时按下ShiftF10组合键调出管理员命令提示符窗口&#xff0c;依次执行下面命令&#xff0c;输入命令&#xff0c;按Enter键执行&#xff0c;提示操作成功完成&#xff0c;才可以。这些命令可以添加注册表项&#xff0c;绕过TPM、安全启动、CPU、内存和硬盘…