JSX 条件渲染

news2024/12/24 2:18:28

学习目标: 能够在 JSX 中实现条件渲染
作用: 根据是否满足条件生成 HTML 结构,比如 Loading 效果
实现: 可以使用三元运算符或者逻辑&&(与)运算符
实例:

function App() {
  // 条件渲染
  // 技术方案:1.三元表达式(常用) 2.逻辑&&(与)运算

  const flag = true
  return (
    <div className="App">
      1.三元表达式<br/>
      (1).简单版:
        {flag ? <span>this is span</span>:null}<br/>
      (2).复杂版(可用小括号包裹起来):
      {
        flag ? (<div>
          <span>this is span2</span>
        </div>) : null
        }
      2.&& (前面为true则显示,false则不显示))<br/>
        {true && <span>this is span</span>}
    </div>
  );
}

export default App;

运行结果:
在这里插入图片描述

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

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

相关文章

基于模型的电机brushless DC motor (BLDCM)控制方法

(无框)力矩电机&#xff0c;全称应该为永磁无刷直流(无框)力矩电机&#xff0c;其显著的特征是&#xff1a; 较大的径长比&#xff08;diameter-to-length ratio&#xff09;较多数目的磁极&#xff08;magnet poles&#xff09; 无框架电机是传统电机中用于产生扭矩和速度的…

朋友圈可分享的产品画册是怎么做的?

经常刷朋友圈的时候有看到别人分享的各式各样的产品画册&#xff0c;带动画、带音乐、还有真书般的翻页效果&#xff0c;看起来十分炫酷且好看呢&#xff01;那么&#xff0c;这种可以分享到朋友圈的产品画册是怎么制作的呢&#xff1f; 推荐使用FLBOOK即可在线制作并分享到朋友…

电商API接口:如何让数据成为生产力!

随着数字化商业时代的到来&#xff0c;API接口已成为电商资源连接利器&#xff0c;也是全球传统互联网企业转型的基础。 2021年 Google Cloud 研究显示&#xff0c;全球互联网企业近3/4的企业持续投入数字化转型&#xff0c;2/3的企业在持续增加投入&#xff0c;从这组数据可以…

从制造到“智造”,看科聪控制系统如何赋能汽车行业智能生产

汽车行业成为推动国家经济发展的支柱性行业之中&#xff0c;在国家经济社会发展有着重要的地位。如今&#xff0c;汽车制造业面临着制造升级和技术更新的问题&#xff0c;需要高效、合理和现代化的物流系统。 某汽车厂通过投运以科聪控制系统为核心的叉式移动机器人&#xff0c…

山西电力市场日前价格预测【2023-10-24】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-10-24&#xff09;山西电力市场全天平均日前电价为246.84元/MWh。其中&#xff0c;最高日前电价为419.16元/MWh&#xff0c;预计出现在18:30。最低日前电价为0.00元/MWh&#xff0c;预计出…

【wxWidgets实现透明wxPanel_核心实现_原创思想】

描述 wxWidgets 根本就没有实现过透明wxPanel容器,你设置wxTRANSPARENT_WINDOW,结果sorry 黑色,哈哈哈哈, 就是和你作对.想想当下那么漂亮的桌面, 背景, 透明, 特效.哎 悲哀啊,实现不了,就那死板的界面特性. 网上找了好久,也是乱七八糟,改底层代码还是算了吧,升级特要命.都是只…

Ultralytics YOLOv8的关键特点

计算机视觉领域正在迅速增长&#xff0c;其中最重要的技术之一是目标检测。每六个月都会出现新的目标检测算法&#xff0c;不断提高准确性&#xff0c;与之前的算法相比。Ultralytics YOLOv8是最先进的目标检测算法&#xff0c;不仅提供卓越的准确性&#xff0c;还支持CPU和GPU…

一次单据图片处理的优化实践 | 京东物流技术团队

1 引言 日常开发中接到这样的需求&#xff0c;上游系统请求获取一张A4单据用于仓库打印及展示&#xff0c;要求PNG图片格式&#xff0c;但是我们内部得到的单据格式为PDF&#xff0c;需要提取PDF文档的元素并生成一张PNG图片。目前已经有不少开源工具实现了这一功能&#xff0…

【Mybatis】不启动项目直接测试Mapper的方法

【Mybatis】不启动项目直接测试Mapper的方法 0、前言1. 依赖2. 数据库3. 实体类4. Mapper文件5. 配置类6. Main方法 0、前言 在项目开发过程中&#xff0c;有时候一个庞大的SpringBoot 项目的启动时间可能要几分钟的时间&#xff0c;这时候我们如果想测试自己写的某个mybatis的…

pytorch实战---IMDB情感分析

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

【基于形态学的权重自适应去噪】

【基于形态学的权重自适应去噪】 1 引言2 数学形态学原理3 权重自适应的多结构形态学去噪4 实现代码4.1 主函数代码4.2 串、并联去噪4.3 图像权值计算4.4 计算 PSNR 值 5 实验结果 参考书籍&#xff1a;计算机视觉与深度学习实战:以MATLAB、Python为工具&#xff0c; 主编&…

【Java】多态中调用成员的特点

示例代码 public class Test {public static void main(String[] args) {//创建对象&#xff08;多态方式&#xff09;//父类 f new 子类();Animal a new Dog();//调用成员变量&#xff1a;编译看左边&#xff0c;运行也看左边//编译看左边&#xff1a;javac编译代码的时候&…

Python深度学习进阶与应用丨注意力(Attention)机制、Transformer模型、生成式模型、目标检测算法、图神经网络、强化学习详解等

目录 第一章 注意力&#xff08;Attention&#xff09;机制详解 第二章 Transformer模型详解 第三章 生成式模型详解 第四章 目标检测算法详解 第五章 图神经网络详解 第六章 强化学习详解 第七章 深度学习模型可解释性与可视化方法详解 更多应用 近年来&#xff0c;伴…

【Java】JDK 21中的虚拟线程以及其他新特性

目录 一、字符串模板&#xff08;String Templates&#xff09; 二、序列化集合&#xff08;Sequenced Collections&#xff09; 三、分代ZGC&#xff08;Generational ZGC&#xff09; 四、记录模式&#xff08;Record Patterns&#xff09; 五、Fibers&#xff08;纤程&…

实战SRC

附言&#xff1a;从补天的公益src公司中选中了幸运儿。 1. 通过hunter鹰图平台搜索公司的相关资产&#xff0c;发现其采用了华途应用安全网关。 2.访问相关地址&#xff0c;尝试使用弱口令登录&#xff0c;发现直接利用admin/admin就登录了&#xff0c;可以看到后台的相关日志…

汉语言语的声学特点是什么

汉语言语的声学特点是什兰明 医学硕士&#xff0c;听力学博士&#xff0c;听觉健康门诊主任 虽然互联网已经将英语作为最常用的&#xff08;第二&#xff09;语言的地位&#xff0c;但中文&#xff08;普通话&#xff09;仍然是最常用的母语。2010年&#xff0c;以中文为…

新成果展示:AlGaN/GaN基紫外光电晶体管的设计与制备

紫外光电探测器被广泛应用于导弹预警、火灾探测、非可见光通信、环境监测等民事和军事领域&#xff0c;这些应用场景的实现需要器件具有高信噪比和高灵敏度。因此&#xff0c;光电探测器需要具备响应度高、响应速度快和暗电流低的特性。近期&#xff0c;天津赛米卡尔科技有限公…

C++ 读取数量不定的输入数据

在C中&#xff0c;有时我们会遇到&#xff0c;在事先没有知道&#xff0c;要对多少个数进行求和的情况下&#xff0c;这就需要不断的读取数据直至没有新的输入为止&#xff1a; demo&#xff1a; #include <iostream> using namespace std;int main() {int sum 0;in…

如何打造小红书产品差异化,打造产品优势?

其实在当今的时代&#xff0c;我们实质上已经进入到了一个产能过剩的时代&#xff0c;这意味着大量的同质化产品出现在市场上&#xff0c;选择更多了但是选择也更少了。今天为大家分享下如何打造小红书产品差异化&#xff0c;打造产品优势&#xff1f; 下面是一些产品差异化策略…

Redis数据结构完全解析:底层实现细节揭秘

文章目录 &#x1f34a; 简单字符串&#x1f389; 问题1&#xff1a;SDS结构体的三个属性分别表示什么意思&#xff1f;&#x1f389; 问题2&#xff1a;SDS字符串的内存分配方式是怎么样的&#xff1f;&#x1f389; 问题3&#xff1a;SDS字符串的拼接操作是怎么样的&#xff…