react基础学习 JSX

news2024/10/6 2:29:33

 JSX的测试网站 Babel · Babel    可以测试代码的效果

JSX实现map列表 注意  key不一样(使用遍历的时候)

简单条件渲染

复杂条件渲染

绑定事件

function App() {

  const colorse = (e)=>{
    console.log("测试点击",e);
  }
  const colorse1 = (name)=>{
    console.log("测试点击",name);
  }
  const colorse2 = (name,e)=>{
    console.log("测试点击",name,e);
  }
  return (
    <div className="App" >
      这是我的世界 <br></br>
      <button onClick={colorse} >测试点击事件</button>
      <button onClick={()=>colorse1("你是好的")} >测试点击事件传参</button>
      <button onClick={(e)=>colorse2("你是好的",e)} >测试点击事件传参</button>
    </div>
  );
}
export default App;

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

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

相关文章

月入30000的软件测试人员,简历是什么样子的?

我们都知道&#xff0c;简历是一个人进入职场的敲门砖。从某种层面来说&#xff0c;简历也像一个人的具象身份证&#xff0c;或者专业资格证。所以&#xff0c;一份简历的好坏&#xff0c;不仅关乎个人的“脸面”&#xff0c;更关乎你是不是一个有“含金量”的技术人员。 所以…

Python爬虫协程批量下载图片

import aiofiles import aiohttp import asyncio import requests from lxml import etree from aiohttp import TCPConnectorclass Spider:def __init__(self, value):# 起始urlself.start_url value# 下载单个图片staticmethodasync def download_one(url):name url[0].spl…

Docker容器开启特权模式

一、问题 1、容器系统中无法使用systemctl命令 即使是开了特权模式&#xff08;--privileged&#xff09; 2、无法通过/sbin/init启动容器 要想在容器中使用systemctl命令&#xff0c;除了要指定--privileged参数外&#xff0c;还需要指定启动参数为/sbin/init&#xff0c;但…

关于protobuf import 在idea中报红色错误解决

首先安装protobuf 插件 protocol 文件引入别的protocol 时报红原因在插件的设置&#xff0c;它并不知道去哪找&#xff0c;只需要配置下protobuf的所在目录即可

【成品设计】基于单片机的智慧交通控制系统设计

《基于单片机的智慧交通控制系统设计》 所需器件&#xff1a; STM32最小系统板。按键模块。红黄绿LED灯柱。距离传感器。OLED屏幕。语音识别模块。 整体功能&#xff1a; 本文介绍了一种基于单片机的智慧交通控制系统设计。该系统集成了多种传感器、控制器和执行器&#xf…

【成品设计】基于USB接口的指纹图像采集与处理系统设计

《基于USB接口的指纹图像采集与处理系统设计》 所需器件&#xff1a; STM32F429阿波罗开发板。ATK-AS608 模块指纹识别模块。USB转TTL模块。 整体功能&#xff1a; 实现指纹的采集录入。实现指纹的对比&#xff0c;并展示对比结果&#xff0c;用LED灯和蜂鸣器提示。指纹信息…

云原生下的数据协调艺术:etcd存储系统解析

目录 一、分布式存储简介 二、etcd介绍 三、etcd架构 四、etcd集成实践 一、分布式存储简介 随着云原生与容器化技术的兴起&#xff0c;分布式系统的复杂性大大增加。分布式系统面临一系列问题&#xff0c;比如部署复杂、响应时间慢、运维复杂等&#xff0c;其中最根本的问…

MySQL数据库整体知识点简述

目录 第一章&#xff1a;数据库系统概述 第二章&#xff1a;信息与数据模型 第3章 关系模型与关系规范化理论 第四章——数据库设计方法 第六-七章——MySQL存储引擎与数据库操作管理 第九章——索引 第10章——视图 第11章——MySQL存储过程与函数 第12章——MySQL 触…

神工坊夏日知识问答|辨“麦克斯韦妖”,赢百元好礼!

神工坊知识问答 辨“麦克斯韦妖”&#xff0c;赢百元好礼&#xff01; 科普时间到&#xff01; 中国古代传说有四大神兽 分别是青龙、白虎、朱雀和玄武 那你知道物理学中也有“四大神兽”吗&#xff1f; 它们分别是芝诺的乌龟、拉普拉斯兽 麦克斯韦妖和薛定谔的猫 芝诺的…

【Vue】组件通信

文章目录 一、组件之间如何通信二、组件关系分类三、通信解决方案四、父子通信流程五、父向子通信代码示例六、子向父通信代码示例 组件通信&#xff0c;就是指组件与组件之间的数据传递 组件的数据是独立的&#xff0c;无法直接访问其他组件的数据。想使用其他组件的数据&…

Linux C语言学习:数据类型

一、 为什么要引入数据类型 • 计算机中每个字节都有一个地址&#xff08;类似门牌号&#xff09; • CPU通过 地址 来访问这个字节的空间 0x20001103 1 0 0 1 0 0 1 1 0x20001102 1 1 1 0 1 1 1 0 0x20001101 1 1 1 1 0 1 0 1 0x20001100 0 …

什么是it运维工单系统?有哪些应用价值?

it运维工单系统是一个智能化的it运维服务管理系统&#xff0c;可以为企业和服务提供商提供高效的it运维服务管理&#xff0c;它可以自动分配任务、优化工作流程并跟踪工作进展&#xff0c;从而大大提高it运维工作效率和客户满意度。 一、it运维工单系统是什么&#xff1f; it…

提示词工程基础:定义与重要性

目录 一、引言二、提示词工程的定义1. 概念明晰2. 技术框架3. 功能作用 三、提示词工程的重要性1. 核心作用强调2. 提升效率与降低成本3. 推动技术发展与创新 四、提示词工程的组成部分1. 提示词设计2. 模型训练与调整3. 效果评估与优化 五、实际应用示例1. 虚拟助手2. 自动新闻…

1790java网络学习平台Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java网络学习平台系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助采用了java设计&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统采用web模式&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&…

STM32自己从零开始实操04:显示电路原理图

一、TFT-LCD 屏接口 1.1指路 以下是该部分的设计出来后的实物图&#xff0c;我觉得看到实物图可能更方便理解这部分的设计。 图1 实物图 这部分设计的是一个屏幕的接口&#xff0c;很简单。使用的屏幕是&#xff1a;2.8inch 16BIT Module MRB2801。 1.2数据手册 &#xff0…

【Redis数据库】命令操作

文章目录 一、连接命令二、键命令 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f495;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01; &#x1f495;希望您在这里可以感受到一份轻松愉快的氛围&#xff01; &#x1f495;这里不仅可以获得有…

sqoop操作

介绍 sqoop是隶属于Apache旗下的, 最早是属于cloudera公司的,是一个用户进行数据的导入导出的工具, 主要是将关系型的数据库(MySQL, oracle...)导入到hadoop生态圈(HDFS,HIVE,Hbase...) , 以及将hadoop生态圈数据导出到关系型数据库中 操作 将数据从mysql中导入到HDFS中 1.全量…

贷款行业新宠:短信群发营销的高效应用

在贷款行业的激烈竞争中&#xff0c;短信群发营销凭借其高效、精准的特性逐渐崭露头角&#xff0c;成为行业新宠。 一、个性化信息&#xff0c;直达目标客户 通过短信群发&#xff0c;贷款机构能够精准地向目标客户推送个性化的贷款产品推荐。基于客户的信用状况、贷款需求等…

[Windows] 植物大战僵尸杂交版

游戏包含冒险模式、挑战模式、生存模式三种不同玩法。冒险模式主打关卡闯关&#xff0c;挑战模式则挑战特殊设计的关卡&#xff0c;生存模式结合无尽模式和特殊地图&#xff0c;各具特色。玩家可根据喜好自由选择模式&#xff0c;体验不同的游戏乐趣。快来尝试这款独特的pvz游戏…

麦肯锡:ChatGPT等生成式AI应用激增,大中华区增长最快

全球顶级咨询公司麦肯锡&#xff08;McKinsey & Company&#xff09;在官网发布了《he state of AI in early 2024:Gen AI adoption spikes and starts to generate value》&#xff0c;一份关于生成式AI应用的调查报告。 麦肯锡对多个国家/地区的1,363位管理者进行了调查…