REACT 条件渲染

您的组件通常需要根据不同的条件显示不同的内容。在 React 中,你可以使用 JavaScript 语法(如语句、 和运算符)有条件地呈现 JSX。if&&? :

有条件地返回 JSX

假设您有一个渲染多个 s 的组件,可以将其标记为打包或未打包:PackingListItem

function Item({ name, isPacked }) {return <li className="item">{name}</li>;
}export default function PackingList() {return (<section><h1>Sally Ride's Packing List</h1><ul><Item isPacked={true} name="Space suit" /><Item isPacked={true} name="Helmet with a golden leaf" /><Item isPacked={false} name="Photo of Tam" /></ul></section>);
}

如果 prop 是 ,则此代码返回不同的 JSX 树。通过此更改,某些项目在末尾会打勾:isPackedtrue

function Item({ name, isPacked }) {if (isPacked) {return <li className="item">{name} ✔</li>;}return <li className="item">{name}</li>;
}export default function PackingList() {return (<section><h1>Sally Ride's Packing List</h1><ul><Item isPacked={true} name="Space suit" /><Item isPacked={true} name="Helmet with a golden leaf" /><Item isPacked={false} name="Photo of Tam" /></ul></section>);
}

有条件地不返回任何内容null 

在某些情况下,您根本不想渲染任何内容。例如,假设您根本不想显示包装好的商品。组件必须返回某些内容。在这种情况下,您可以返回:null

if (isPacked) {return null;
}
return <li className="item">{name}</li>;

如果为 true,则组件将不返回任何内容。否则,它将返回 JSX 进行渲染。isPackednull

function Item({ name, isPacked }) {if (isPacked) {return null;}return <li className="item">{name}</li>;
}export default function PackingList() {return (<section><h1>Sally Ride's Packing List</h1><ul><Item isPacked={true} name="Space suit" /><Item isPacked={true} name="Helmet with a golden leaf" /><Item isPacked={false} name="Photo of Tam" /></ul></section>);
}

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

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

相关文章

《Python机器学习 》书籍分享

文章目录 前言内容介绍作者简介书籍目录 前言 随着计算能力的快速增长&#xff0c;大量任务都可在台式机上完成&#xff1b;在这样的背景下&#xff0c;机器学习应运而生&#xff0c;成为当今炙手可热的话题。但初出茅庐的新手常对机器学习感到十分畏惧&#xff1b;为给这些新…

面试集中营—Seata分布式事务

一、分布式事务 本地事务 在计算机系统中&#xff0c;更多的是通过关系型数据库来控制事务&#xff0c;这是利用数据库本身的事务特性来实现的&#xff0c; 因此叫数据库事务&#xff0c;由于应用主要靠关系数据库来控制事务&#xff0c;而数据库通常和应用在同一个服务器&am…

数据结构:包装类初始泛型

目录 1.包装类1.1 基本数据类型和对应的包装类1.2 装箱和拆箱 2.什么是泛型3.引出泛型3.1 语法3.2 泛型的使用 4.泛型是如何编译的4.1 擦除机制4.2 为什么不能实例化泛型类型数组 5.泛型的上界5.1 语法5.2 示例5.3 复杂示例 6.泛型方法6.1 定义语法6.2 示例6.3 使用示例-可以类…

【CMU 15-445】Proj4 Concurrency Control

Concurrency Control 通关记录Task1 TimestampsTask2 Storage Format and Sequential ScanTask3 MVCC ExecutorsTask3.1 Insert ExecutorTask3.2 CommitTask3.3 Update and Delete ExecutorTask3.4 Stop-the-world Garbage Collection Task4 Primary Key IndexTask4.0 Index Sc…

Springboot+logback 详细配置

一、添加依赖 这里使用springboot3.0.2 依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency><dependency><groupId>org.projectlombok</grou…

macos使用yarn创建vite时出现Usage Error: The nearest package directory问题

步骤是macos上使用了yarn create vite在window上是直接可以使用了yarn但是在macos上就出现报错 我们仔细看&#xff0c;它说的If /Users/chentianyu isnt intended to be a project, remove any yarn.lock and/or package.json file there.说是要我们清除yarn.lock和package.js…

yolo world 瑞芯微芯片rknn部署、地平线芯片Horizon部署、TensorRT部署

特别说明&#xff1a;参考官方开源的 yoloworld 代码、瑞芯微官方文档、地平线的官方文档&#xff0c;如有侵权告知删&#xff0c;谢谢。 模型和完整仿真测试代码&#xff0c;放在github上参考链接 模型和代码。 yoloworld出来的有一段时间了&#xff0c;还没有盘到板端上玩一玩…

C# 集合(四) —— Set类

总目录 C# 语法总目录 集合四 Set 1. Set 1. Set 有 HashSet 和 SortedSet&#xff0c; 它们都不包含重复元素忽略添加重复值的请求无法根据位置访问元素使用Contains方法均使用散列查找&#xff0c;所以速度快 SortedSet 按照一定顺序保存元素&#xff0c;使用红黑树实现&a…

Python脚本同步Hive表结构到MySQL

环境说明&#xff1a;pycharm2022.3.2连接虚拟机远程环境&#xff0c;具体详见上一篇。 import pymysql from pyhive import hive# 连接Hive数据库 hive_conn hive.Connection(hosthadoop102,port10000,databasedb_hive) hive_cursor hive_conn.cursor()# 连接MySQL数据库 m…

哲学家就餐问题

哲学家就餐问题 问题信号量实现发生死锁版限制人数版规定取筷顺序 条件变量实现 问题 在一个圆桌上坐着五位哲学家&#xff0c;每个哲学家面前有一个碗装有米饭的碗和一个筷子。哲学家的生活包括思考和进餐两个活动。当一个哲学家思考时&#xff0c;他不需要任何资源。当他饿了…

芸众商城电商专业版400+插件源码+搭建教程

介绍&#xff1a; 芸众商城社交电商系统SAAS平台前端基于vue开发&#xff0c;后端基于研发积分商城系统源码 php&#xff0c;本文安装芸众商城全插件&#xff08;400多个&#xff09;商业版平台源码&#xff0c;可同时支持多端口部署运行&#xff1b;使用宝塔面板一键部署的形…

LibreNMS简介

目录 1 LibreNMS简单介绍1.1 LibreNMS介绍 2 安装2.1 Ubuntu安装1、安装依赖2、添加 librenms 用户3、下载 LibreNMS4、设置权限5、安装 PHP 依赖项6、设置时区7、配置 MariaDB8、配置 PHP-FPM9、配置 Web 服务器10、启用 lnms 命令11、配置 snmpd12、cron13、启用调度程序14、…

Flutter 中的 Expanded 小部件:全面指南

Flutter 中的 Expanded 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;Expanded 是一个用于控制子控件占据可用空间的布局小部件&#xff0c;通常与 Row、Column 或 Flex 等父级布局小部件一起使用。Expanded 允许你创建灵活的布局&#xff0c;其中子控件可以按照指定…

SpringCloudAlibaba 2023.0.1、SpringBoot 3.2.5 - 项目完整搭建(Nacos、OpenFeign、Gateway)

目录 一、SpringCloudAlibaba 项目完整搭建 1.1、初始化项目 1.2、配置父工程的 pom.xml 1.3、创建子模块

贪吃蛇(c实现)

目录 游戏说明&#xff1a; 第一个是又是封面&#xff0c;第二个为提示信息&#xff0c;第三个是游戏运行界面 游戏效果展示&#xff1a; 游戏代码展示&#xff1a; snack.c test.c snack.h 控制台程序的准备&#xff1a; 控制台程序名字修改&#xff1a; 参考&#xff1a…

如何自定义双亲委派中类的加载器

在Java中&#xff0c;要自定义双亲委派模型中的类加载器&#xff0c;需要继承java.lang.ClassLoader类&#xff0c;并重写其中的findClass(String name)方法。findClass方法负责根据类的名字查找并加载类的字节码数据。 通常不建议直接重写findClass方法&#xff0c;而是应该重…

练习队列的相关操作:循环队列

1. 思路解析 循环队列就是在只有有限的空间时使用队列实现循环存储数据&#xff0c;有双向链表和数组两种选择&#xff0c;这里我们使用数组实现循环队列&#xff08;因为链表我不会 >-<&#xff09; 2. 相关函数及其实现 2.1 判空与判满 判空&#xff1a;直接返回头尾…

Leetcode—946. 验证栈序列【中等】

2024每日刷题&#xff08;133&#xff09; Leetcode—946. 验证栈序列 实现代码 class Solution { public:bool validateStackSequences(vector<int>& pushed, vector<int>& popped) {int left 0;for(int i 0; i < popped.size(); i) {while(left &…

关于我转生从零开始学C++这件事:获得神器

❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载&#xff0c;请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主&#xff0c;代码兴国&#xff01;❤❤❤ 几天不见 &#xff0c;甚是想念&#xff01;哈咯大家好又是我大伟&#xff0c;五一的假期已经结束&#xff0…

超绝git

我们应该学会使用超绝git了&#xff0c;首先&#xff0c;什么是git&#xff1f; git是超绝版本控制器&#xff08;去中心化的分布式系统&#xff09;&#xff0c;什么又是版本控制&#xff0c;git和Gitee又有什么牵扯&#xff1f; git安装 这是安装git&#xff1a; yum ins…