当前位置: 首页 > news >正文

React JSX 使用条件语句渲染UI的两种写法

只针对函数组件

1. 第一种写法:

function App({ id }) {return id==1? <h1>hello</h1> : <h1>world</h1>;
}

或者:

function App({ id }) {return (<h1>{id==1 && "hello" || id==2 && "world" || "unknown"}</h1>)
}

2. 如果需要条件细分,第二种写法

function App({ id }) {let content = ""if (id==1) {content = "hello" //如果包含html标签,默认会被转义}else if (id==2) {content = "world"}return (<h1>{content}</h1>);
}

3. 第三种写法:

function App({ id }) {return (<h1>{(()=>{if (id==1) {return "hello"}else if (id==2) {return "world"}})()}</h1>);
}

switch同理:

function App({ id }) {return (<h1>{(()=>{switch(id) {case 1:return "hello"case 2:return "world"default:return "unknown"}})()}</h1>);
}

相关文章:

React JSX 使用条件语句渲染UI的两种写法

只针对函数组件 1. 第一种写法&#xff1a; function App({ id }) {return id1? <h1>hello</h1> : <h1>world</h1>; } 或者&#xff1a; function App({ id }) {return (<h1>{id1 && "hello" || id2 && "wo…...

谷歌-BERT-第四步:模型部署

1 需求 需求1&#xff1a;基于gradio实现大模型的WEB UI交互界面 2 接口 3 示例 import gradio as gr from transformers import *classifier pipeline("text-classification", model"./model", tokenizer"./model")gr.Interface.from_pipel…...

猫咪化身蒲公英,浮毛满屋乱飞,有哪些宠物空气净化器值得购买?

不掉毛的猫咪究竟是谁在养&#xff1f; 当初去朋友家玩&#xff0c;被猫咪捕获芳心&#xff0c;没多久自己也领养了一只。没想到啊&#xff0c;这就意味着要和猫毛纠缠一辈子了。平时白天上班不在家&#xff0c;它就在一边跑动一边掉毛&#xff0c;回到家我都能推断它的行动路…...

端到端的开源OCR模型:GOT-OCR-2.0,支持场景文本、文档、乐谱、图表、数学公式等内容识别!

今天给大家分享一个端到端的开源 OCR 模型&#xff0c;号称 OCR 2.0&#xff01; 支持场景文本、文档、乐谱、图表、数学公式等内容识别&#xff0c;拿到了 BLEU 0.972 高分。 从给出的演示图来看&#xff0c;一些非常复杂的数学公式都能正确的识别&#xff0c;颇为强大。模型…...

自注意力机制self-attention中QKV矩阵的含义

自注意力机制&#xff08;Self-Attention&#xff09;是Transformer模型的核心组件&#xff0c;其中Q、K、V矩阵分别代表查询&#xff08;Query&#xff09;、键&#xff08;Key&#xff09;、值&#xff08;Value&#xff09;。它们的作用和含义可以通过信息匹配过程来理解。在…...

【前端】Bootstrap:栅格系统 (Grid System)

Bootstrap的栅格系统是该框架的核心部分之一&#xff0c;能够让开发者轻松创建响应式网页布局&#xff0c;适配各种屏幕尺寸和设备。栅格系统通过将页面划分为12列的布局结构&#xff0c;开发者可以根据内容的重要性和设计需求灵活控制元素的宽度和排列。 在这篇文章中&#x…...

一文读懂,SSL证书怎么验签安装使用?

SSL证书目前已经有越来越多的企业网站开始使用&#xff0c;安装SSL证书后&#xff0c;原有的http协议将会变成安全性更好的https加密协议&#xff0c;这对保护用户的信息安全&#xff0c;保障企业及用户的利益起着重要作用。 一张SSL证书的获取&#xff0c;需要经历不少环节&a…...

Mysql(八) --- 视图

文章目录 前言1.什么是视图&#xff1f;2.创建视图3. 使用视图4. 修改数据4.1.注意事项 5. 删除视图6.视图的优点 前言 前面我们学习了索引&#xff0c;这次我们来学习视图 1.什么是视图&#xff1f; 视图是一个虚拟的表&#xff0c;它是基于一个或多个基本表或其他视图的查询…...

SQL注入原理、类型、危害与防御

SQL注入的原理概念 SQL注入是一种常见的网络攻击技术&#xff0c;攻击者通过在Web应用程序的输入字段中注入恶意构造的SQL代码&#xff0c;以欺骗后端数据库执行非预期的SQL命令。这种攻击可以导致数据泄露、权限提升、数据篡改甚至系统瘫痪。SQL注入可以分为多种类型&#xf…...

第2讲 数据库系统的结构抽象与演变

基本内容 数据库系统的标准结构?数据模型?数据库系统的演变与发展?重难点 一组概念的区分:三级模式两层映像,物理独立性和逻辑独立性一组概念的区分:数据→模式→数据模型几种数据模型的差异:网状/层次模型→关系模型→数据模型数据库系统的标准结构 (1)数据库系统的分…...

Git创建开发分支命名规则

git checkout -b feature/branchname 和 git checkout -b branchname 这两条命令的主要区别在于新分支的命名。 主要区别 分支命名&#xff1a; git checkout -b feature/branchname&#xff1a;新分支的名字是 feature/branchname&#xff0c;表示该分支属于一个特性开发&…...

【纯前端excel导出】vue2纯前端导出excel,使用xlsx插件,修改样式、合并单元格

一、使用第三方插件 1、安装 npm install xlsx-js-style 2、引入 import xlsx from xlsx-js-style xlsx插件是基础的导出&#xff0c;不可以修改样式&#xff0c;直接xlsx-style插件式修改样式的&#xff0c;所以这里直接用二者合体插件即可 二、页面使用 1、数据源 [{"…...

如何在极速浏览器中实现谷歌浏览器的扩展功能

在当今数字化时代&#xff0c;浏览器扩展功能极大地增强了我们的在线体验。尤其是谷歌浏览器&#xff0c;以其丰富的扩展生态而闻名。但是&#xff0c;如果你想在极速浏览器中使用这些谷歌浏览器的扩展功能&#xff0c;该怎么办呢&#xff1f;本文将为你详细解析如何实现这一目…...

Web安全 - 跨站点请求伪造CSRF(Cross Site Request Forgery)

文章目录 OWASP 2023 TOP 10CSRF 导图CSRF的基本概念CSRF的工作原理常见CSRF攻击模式CSRF防御策略补充建议应用场景实战防御策略选择1. CSRF Token&#xff08;首选&#xff09;2. SameSite Cookie属性3. 验证Referer和Origin4. 多因素认证 实现方案CSRF Token实现SameSite Coo…...

C++游戏开发完整学习路径

C游戏开发完整学习路径 引言 随着游戏行业的迅速发展&#xff0c;C作为主要的游戏开发语言&#xff0c;因其高效性和灵活性&#xff0c;依然受到广泛欢迎。C不仅在大型游戏开发中被广泛使用&#xff0c;而且在游戏引擎的构建、性能优化和复杂算法的实现中也扮演着关键角色。本…...

vue3之 shallowRef、markRaw

shallowRef 用于创建一个浅层响应式引用&#xff0c;只对顶层属性进行响应式处理。 markRaw 用于标记一个对象&#xff0c;使其完全跳过 Vue 的响应式系统。 这两者都可以用于优化性能&#xff0c;避免不必要的响应式开销&#xff0c;特别是在处理大型对象或第三方库对象时。 …...

影刀RPA实战:操作Mysql数据库

1.摘要 影刀RPA&#xff08;Robotic Process Automation&#xff09;是一种软件自动化工具&#xff0c;它可以模拟人类用户执行各种重复性任务&#xff0c;其中包括对数据库的操作。 我们可以使用软件自动化指令&#xff0c;通过获取数据库窗口对象来操作数据库&#xff0c;也…...

【c++】c++11多线程开发

2 C多线程 本文是参考爱编程的大丙c多线程部分内容&#xff0c;按照自己的理解对其进行整理的一篇学习笔记&#xff0c;具体一些APi的详细说明请参考大丙老师教程。 代码性能的问题主要包括两部分的内容&#xff0c;一个是前面提到资源的获取和释放&#xff0c;另外一个就是多…...

PW37R_V1 产品规格书

概述 PW37R_V1是一款采用3.7英寸黑白红三色电子纸显示的电子标签&#xff0c;采用一种先进的无线自动更新系统&#xff0c;实现无线传输。 通过http&#xff0c;mqtt协议更新数据和控制该款电子标签的显示等操作&#xff0c;显示内容可自定义。内置电池供电&#xff0c;可Typ…...

android11 usb摄像头添加多分辨率支持

部分借鉴于&#xff1a;https://blog.csdn.net/weixin_45639314/article/details/142210634 目录 一、需求介绍 二、UVC介绍 三、解析 四、补丁修改 1、预览的限制主要存在于hal层和framework层 2、添加所需要的分辨率&#xff1a; 3、hal层修改 4、frameworks 5、备…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...