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

React基础教程(07):条件渲染

1 条件渲染

使用条件渲染,结合TodoList案例,进行完善,实现以下功能:

  • 当列表中的数据为空的时候,现实提示信息暂无待办事项
  • 当列表中存在数据的时候,提示信息消失

这里介绍三种实现方式。

注意这里的Empty是前端框架Antd的组件,如果安装了antd直接使用即可,如果没有安装可以用div代替也是可以的。这里为了更直观,所以使用了前端框架antdEmpty组件。

1、三元操作符

{/*方式一*/}
{this.state.list.length === 0 ? <Empty style={{float:"left"}} description={"暂无待办事项"} /> : null}

2、逻辑与操作符

{/*方式二*/}
{ this.state.list.length === 0 && <Empty style={{float:"left"}} description={"暂无待办事项"} />}

3、css控制

方式三,主要是通过给Empty容器绑定className属性为hidden,然后通过className属性,设置容器的display:none,来实现Empty的隐藏与现实,该方法中的Empty是一直都存在的。

{/*方式三*/}
<Empty className={this.state.list.length === 0 ? "" : "hidden"} style={{float:"left"}} description={"暂无待办事项"} />

2、实现效果动图如下

在这里插入图片描述

3、完整代码

import React, {Component} from "react";
import {Button, Empty} from 'antd';
import {DeleteOutlined} from '@ant-design/icons';import './css/App.css'
import './css/01-index.css'export default class App extends Component {a = 35;myRef = React.createRef();// 定义状态state = {list: [{id: 1,name: "凯文·杜兰特"},{id: 2,name: "德文·布克"},{id: 3,name: "布拉德利·比尔"}]}render() {return (<div style={{marginTop: 10, marginLeft: 10}}><input style={{width: 200}}ref={this.myRef}/>{/*非常推荐*/}<Button style={{backgroundColor: '#2ba471', border: "none"}} size={"middle"} type={"primary"}onClick={() => {this.handlerClick() // 非常推荐,传参数}}>添加</Button><ul>{this.state.list.map((item, index) =><li style={{fontWeight: "bold", fontSize: "20px"}} key={item.id}>{item.name}<Button size={"small"}style={{marginLeft: 10}}type={"primary"}shape={"circle"}dangeronClick={() => this.handlerDeleteClick(index)}icon={<DeleteOutlined/>}/></li>)}</ul>{/*方式一*/}{/*{this.state.list.length === 0 ? <Empty style={{float:"left"}} description={"暂无待办事项"} /> : null}*/}{/*方式二*/}{/*{ this.state.list.length === 0 && <Empty style={{float:"left"}} description={"暂无待办事项"} />}*/}{/*方式三*/}<Empty className={this.state.list.length === 0 ? "" : "hidden"} style={{float:"left"}} description={"暂无待办事项"} /></div>)}handlerClick = () => {console.log("Click4", this.myRef.current.value);// 不要这样写,因为不要直接修改状态,可能会造成不可预期的问题// this.state.list.push(this.myRef.current.value);let newList = [...this.state.list];newList.push({id: Math.random() * 100000000, // 生产不同的idname: this.myRef.current.value});this.setState({list: newList})}handlerDeleteClick(index) {console.log("Del-", index);// 深复制let newList = this.state.list.concat();newList.splice(index, 1);this.setState({list: newList})// 清空输入框this.myRef.current.value = "";}
}

相关文章:

React基础教程(07):条件渲染

1 条件渲染 使用条件渲染&#xff0c;结合TodoList案例&#xff0c;进行完善&#xff0c;实现以下功能&#xff1a; 当列表中的数据为空的时候&#xff0c;现实提示信息暂无待办事项当列表中存在数据的时候&#xff0c;提示信息消失 这里介绍三种实现方式。 注意这里的Empty是…...

回归预测 | Matlab实现NGO-HKELM北方苍鹰算法优化混合核极限学习机多变量回归预测

回归预测 | Matlab实现NGO-HKELM北方苍鹰算法优化混合核极限学习机多变量回归预测 目录 回归预测 | Matlab实现NGO-HKELM北方苍鹰算法优化混合核极限学习机多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现NGO-HKELM北方苍鹰算法优化混合核极限…...

操作系统——信号

将信号分为以上四个阶段 1.信号注册&#xff1a;是针对信号处理方式的规定&#xff0c;进程收到信号时有三种处理方式&#xff1a;默认动作&#xff0c;忽略&#xff0c;自定义动作。如果不是自定义动作&#xff0c;这一步可以忽略。这个步骤要使用到signal/sigaction接口 2.…...

力扣1482.制作m束花所需的最少时间

力扣1482.制作m束花所需的最少时间 二分答案 check的时候 用一个bool数组判断是否开花找连续的k朵花 const int N 1e510;int st[N];class Solution {public:int minDays(vector<int>& bloomDay, int m, int k) {int n bloomDay.size();if(n < (long long)m*…...

解决 Linux 和 Java 1.8 中上传中文名称图片报错问题

在 Linux 系统和 Java 1.8 中&#xff0c;当尝试上传含有中文名称的图片时&#xff0c;可能会遇到以下错误提示&#xff1a; Caused by: java.nio.file.InvalidPathException: Malformed input or input contains unmappable characters: /home/uploadPath/2024/06/12/扣子蝴蝶…...

cocos开发的时候 wx.onShow在vscode里面显示红色

这个函数是在微信小游戏平台才会用到。 cocos识别不到wx这个变量。 可以改成下面的写法。 只要在变量前面加一个globalThis.就能识别这个变量了。也不报错了。 搞死强迫症了。orz 欢迎大家来玩我的微信小游戏。多多提意见啊。...

使用 PNPM 从零搭建 Monorepo,测试组件并发布

1 目标 通过 PNPM 创建一个 monorepo&#xff08;多个项目在一个代码仓库&#xff09;项目&#xff0c;形成一个通用的仓库模板。 这里以在该 monorepo 项目中搭建 web components 类型的组件库为例&#xff0c;介绍从仓库搭建、组件测试到组件发布的整个流程。 这个仓库既可…...

Oracle 19C 数据库表被误删除的模拟恢复

Oracle 19C 数据库表被误删除的模拟恢复操作 1、模拟创建表用于恢复测试 sqlplus zzh/zzh SQL> create table obj_tb tablespace users as select * from dba_objects; Table created. SQL> select count(*) from obj_tb; COUNT(*) ---------- 72373 2、记录当前…...

【CICID】GitHub-Actions语法

[TOC] 【CICID】GitHub-Actions语法 1 场景 ​ 当我们开发过程中&#xff0c;经常需要提交代码&#xff0c;打包&#xff0c;部署新代码到对应的环境&#xff0c;整个过程都是人工手动操作&#xff0c;占据开发人员大量时间&#xff0c;并且很繁琐容易出错。所以需要借助一些…...

Ionic 创建 APP

Ionic 创建 APP Ionic 是一个强大的开源框架,用于构建高性能、高质量的移动和网页应用程序。它结合了 Angular、React 或 Vue 的强大功能,以及 Capacitor 或 Cordova 的原生功能,使得开发者可以轻松地创建跨平台的应用程序。本篇文章将指导您如何使用 Ionic 创建一个基本的…...

【数学代码】幂

Hello!大家好&#xff0c;我是学霸小羊&#xff0c;今天来讲讲幂。 求几个相同因数的积的运算&#xff0c;叫做乘方&#xff0c;乘方的结果叫做幂。 a^n&#xff0c;读作 “ a的n次方 ” 或 “ a的n次方幂”&#xff0c;a叫做底数&#xff0c;n叫做指数。 对于底数、指数和幂…...

os.system() 函数

os.system() 是 Python 标准库 os 模块中的一个函数&#xff0c;用于在子终端中运行系统命令。它可以在 Python 脚本中调用外部命令或程序。具体来说&#xff0c;它通过执行命令字符串并返回执行状态来实现这一点。下面是对 os.system() 函数的详细解释&#xff1a; import os…...

Spring Boot中的RESTful API详细介绍及使用

在Spring Boot中&#xff0c;RESTful API的实现通过控制器类中的方法和特定的注解来完成。每个注解对应不同的HTTP请求方法&#xff0c;并通过处理请求参数和返回响应来实现不同的操作。 下面将详细解释RESTful API中的各个方面&#xff0c;包括GetMapping, PostMapping, PutMa…...

nlp学习笔记

目录 很多入门例子 bert chinese 很多入门例子 https://github.com/lansinuote/Huggingface_Toturials bert chinese import torch import torch.nn as nn from transformers import AutoTokenizer, AutoModel, BertModel, TFBertModel, BertTokenizer# youpath = D:/bert-…...

使用python获取内存信息

#!/usr/bin/python # -*- coding:utf-8 -*- psutil模块是一个跨平台的获取进程和系统应用情况&#xff08;CPU&#xff0c;内存&#xff0c;磁盘&#xff0c;网络&#xff0c;传感器&#xff09;的库。 该模块用于系统监控、限制进程资源和运行进程的管理等方面。 内存信息&am…...

外包公司泛滥,这些常识你应该提前知道?

今年大环境确实很不好 很多985,211的应届生都在网上大吐苦水&#xff0c;很多大龄离职大厂的技术人也好&#xff0c;业务人也好&#xff0c;都纷纷转向短视频平台做起了自媒体。而找工作的人普遍发现&#xff0c;某最火的招聘平台几乎都被外包公司刷屏了。大大小小的外包公司如…...

Linux下的抓包工具使用介绍

应用层 传输层 网络层 数据链路层 物理层 1&#xff09;tcpdump&#xff08;传输&#xff0f;网络层&#xff09; tcpdump -i eth0 tcpdump -i eth0 -vnn -v&#xff1a;显示包含有TTL&#xff0c;TOS值等等更详细的信息 -n&#xff1a;不要做IP解析为主机名 -nn&#xff1a;…...

centos环境上:k8s 简单安装教程

本次演示安装3节点k8s环境&#xff0c;无需多言&#xff0c;直接上操作步骤&#xff1a; 1、环境准备 k8s部署前&#xff0c;首先需要准备好环境&#xff0c;除了1.4 步骤&#xff0c;其他步骤在所有&#xff08;3个&#xff09;节点上都要执行&#xff1a; 1.1 关闭防火墙 s…...

短视频矩阵系统/源码搭建---拆解热门视频功能开发上线

短视频矩阵系统/源码搭建 一、短视频矩阵系统源码开发需要用到以下技术&#xff1a; 1.前端技术&#xff1a;HTML、CSS、JavaScript、Vue.js等前端框架。 2.后端技术&#xff1a;Java、Python、PHP等后端语言及相关框架&#xff0c;如Spring Boot、Django、Laravel等。 3.移…...

手机和模拟器的 Frida 环境配置

目录 一、配置 JDK 和 android 环境 二、连接设备和查看权限 1、连接设备 2、查看手机权限 三、手机配置 Frida 1、frida-server下载 2、验证 四、模拟器配置 Frida 1、下载模拟器并调节成手机版&#xff1a; 2、连接并查看架构 3、配置并开启 x86 的 frida-serve…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...