【React】条件渲染——逻辑与运算符

条件渲染——逻辑与&&运算符

你会遇到的另一个常见的快捷表达式是 JavaScript 逻辑与(&&)运算符。在 React 组件里,通常用在当条件成立时,你想渲染一些 JSX,或者不做任何渲染。

function Item({ name, isPacked }) {return (<li className="item">{name} {isPacked && '✔'}</li>);
}export default function PackingList() {return (<section><h1>Sally Ride 的行李清单</h1><ul><Item isPacked={true} name="宇航服" /><Item isPacked={true} name="带金箔的头盔" /><Item isPacked={false} name="Tam 的照片" /></ul></section>);
}

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

当 JavaScript && 表达式 的左侧(我们的条件)为 true 时,它则返回其右侧的值(在我们的例子里是勾选符号)。但条件的结果是 false,则整个表达式会变成 false。在 JSX 里,React 会将 false 视为一个“空值”,就像 null 或者 undefined,这样 React 就不会在这里进行任何渲染。

⚠️注意:

切勿将数字放在 && 左侧.
JavaScript 会自动将左侧的值转换成布尔类型以判断条件成立与否。然而,如果左侧是 0,整个表达式将变成左侧的值(0),React 此时则会渲染 0 而不是不进行渲染。

例如,一个常见的错误是 messageCount && <p>New messages</p>。其原本是想当 messageCount 为 0 的时候不进行渲染,但实际上却渲染了 0。

为了更正,可以将左侧的值改成布尔类型:messageCount > 0 && <p>New messages</p>

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

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

相关文章

《深度学习》——深度学习基础知识(全连接神经网络)

文章目录 1.神经网络简介2.什么是神经网络3.神经元是如何工作的3.1激活函数3.2参数的初始化3.2.1随机初始化3.2.2标准初始化3.2.3Xavier初始化&#xff08;tf.keras中默认使用的&#xff09;3.2.4He初始化 4.神经网络的搭建4.1通过Sequential构建神经网络4.2通过Functional API…

Bsin-kb-agent:企业级AI知识库

企业级AI知识库 Bsin-kb-agent 是基于BsinPaaS开源框架和大语言模型构建的企业知识库应用&#xff0c;借鉴langchain的框架思想&#xff0c;引入langchian4j组件&#xff0c;微前端微服务的架构设计&#xff0c;可快速助您构建和体验端到端的AI知识库应用。 应用场景 企业微…

每日OJ题_牛客_春游_贪心+数学_C++_Java

目录 牛客_春游_贪心数学 题目解析 C代码 Java代码 牛客_春游_贪心数学 春游 描述&#xff1a; 盼望着&#xff0c;盼望着&#xff0c;东风来了&#xff0c;春天脚步近了。 值此大好春光&#xff0c;老师组织了同学们出去划船&#xff0c;划船项目收费如下&#xff1a;…

容器化技术入门:Docker详解

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 容器化技术入门&#xff1a;Docker详解 容器化技术入门&#xff1a;Docker详解 容器化技术入门&#xff1a;Docker详解 引言 Doc…

数据挖掘实战-基于SARIMA时间序列模型预测Netflix股票未来趋势

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

Java:多态的调用

1.什么是多态 允许不同类的对象对同一消息做不同的响应。即同一消息可以根据发送对象的不同而采用多种不同的行为方式。&#xff08;发送消息就是函数调用&#xff09;。多态使用了一种动态绑定&#xff08;dynamic binding&#xff09;技术&#xff0c;指在执行期间判断所引用…

HbuildderX运行到手机或模拟器的Android App基座识别不到设备 mac

寻找模拟器 背景&#xff1a; 运行的是h5&#xff0c;模拟器是网易MuMu。 首先检查一下是否配置dab环境&#xff0c;adb version 配置一下hbuilderX的adb&#xff1a; 将命令输出的路径配置到hbuilderx里面去&#xff0c;然后重启下HbuilderX。 开始安装基座…一直安装不…

小程序 CRM 运营系统:提升用户体验的新利器

在当今数字化时代&#xff0c;小程序以其便捷、高效的特点迅速成为企业与用户互动的重要平台。而将客户关系管理&#xff08;CRM&#xff09;运营系统融入小程序中&#xff0c;更是为企业带来了全新的机遇与挑战。那么&#xff0c;如何构建一个成功的小程序CRM运营系统呢&#…

【362】基于springboot的在线租房和招聘平台

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统在线租房和招聘平台信息管理难度大&#xff0c;容错率低&…

华为Mate70前瞻,鸿蒙NEXT正式版蓄势待发,国产系统迎来关键一战

Mate 70系列要来了 上个月&#xff0c;vivo、小米、OPPO、荣耀等众多智能手机制造商纷纷发布了他们的年度旗舰产品&#xff0c;手机行业内竞争异常激烈。 同时&#xff0c;华为首席执行官余承东在其个人微博上透露&#xff0c;Mate 70系列将标志着华为Mate系列手机达到前所未有…

【Java Web】JSP实现数据传递和保存(中)中文乱码 转发与重定向

文章目录 中文乱码转发与重定向转发重定向区别 升级示例1 中文乱码 JSP 中默认使用的字符编码方式&#xff1a;iso-8859-1&#xff0c;不支持中文。常见的支持中文的编码方式及其收录的字符&#xff1a; gb2312&#xff1a;常用简体汉字gbk&#xff1a;简体和繁体汉字utf-8&a…

Java多线程详解⑤(全程干货!!!)线程安全问题 || 锁 || synchronized

这里是Themberfue 在上一节的最后&#xff0c;我们讨论两个线程同时对一个变量累加所产生的现象 在这一节中&#xff0c;我们将更加详细地解释这个现象背后发生的原因以及该如何解决这样类似的现象 线程安全问题 public class Demo15 {private static int count 0;public …

React前端框架:现代网页开发的基石(附带构建简单任务管理应用案例代码)

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; React 是由 Facebook 开发并开源的前端框架&#xff0c;用于构建用户界面。它通过虚拟DOM、高效的渲染机制和组件化的开发模式&am…

在Zetero中调用腾讯云API的输入密钥的问题

也是使用了Translate插件了&#xff0c;但是需要调用腾讯云翻译&#xff0c;一直没成功。 第一步就是&#xff0c;按照这上面方法做&#xff1a;百度、阿里、腾讯、有道各平台翻译API申请教程 之后就是&#xff1a;Zotero PDF translat翻译&#xff1a;申请腾讯翻译接口 主要是…

kelp protocol

道阻且长,行而不辍,未来可期 有很长一段时间我都在互联网到处拾金,but,东拼西凑的,总感觉不踏实,最近在老老实实的看官方文档 & 阅读白皮书 &看合约,挑拣一些重要的部分配上官方的证据,和过路公主or王子分享一下,愿我们早日追赶上公司里那些可望不可及大佬们。…

如何以开源加速AI企业落地,红帽带来新解法

CSDN 看到&#xff0c;生成式 AI 的火爆正在引发计算、开发、交互三大范式全面的升级和转换&#xff0c;全行业或将迎来一次全新的科技变革周期&#xff0c;可能比移动与云计算变革更加剧烈。不过 AI 经历了追求千亿模型效果和芯片、集群硬件的军备竞赛后&#xff0c;如何真正落…

vue的组件使用

1.安装element plus组件库 npm install element-plus --save 2. 3.在页面使用

人保财险(外包)面试分享

前言&#xff1a; 这是本月面的第三家公司&#xff0c;太难了兄弟们&#xff0c;外包都不好找了&#xff0c;临近年底&#xff0c;金九银十已经错过了&#xff0c;金三银四虽然存在&#xff0c;但按照这几年的行情&#xff0c;金九银十和金三银四其实已经是不复存在了&#xf…

Linux-c TCP服务模型

1、TCP模型&#xff0c;服务端与客户端的搭建时序图 2、TCP模型&#xff0c;在创建阶段和通信阶段&#xff0c;对套接字的理解 2.1、tcp连接阶段 2.2、tcp通信状态 一个服务端与多个客户端的通信状态 TCP与UDP的对比 &#xff08;下图是笔者理解所画&#xff0c;可能也许有错…

卡码网KamaCoder 127. 骑士的攻击

题目来源&#xff1a;127. 骑士的攻击 C题解&#xff08;来源A * 算法精讲 &#xff08;A star算法&#xff09; | 代码随想录&#xff09;&#xff1a;Astar Astar 是一种 广搜的改良版。 有的是 Astar是 dijkstra 的改良版。 其实只是场景不同而已 我们在搜索最短路的时候&…