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 = "";}
}

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

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

相关文章

react-day1

1.react是什么呢&#xff1f; react是由Meta公司开发&#xff0c;是一个用于构建web和原生交互界面的库 2.react 项目修改文件保存后 &#xff0c;不能实时更新&#xff0c;需要&#xff1a; 在和package.json文件同目录的地方&#xff0c;新建.env文件&#xff1a;里面加入…

【vue】终端 常用代码 和其他注意

&#x1f951;这里目录 一、【安装】1. 搜版本2.卸载3.安装 带版本4. 纯安装&#xff08;自动最新&#xff09; 二、【官网】官网源码及用法讲解1.【npm】2.【printjs】打印 一、【安装】 以下全拿 qrcode.vue 举例 1. 搜版本 例子&#xff1a;搜 qrcode.vue的版本代码&…

SPI总线协议

目录 一、简介 二、接口 三、传输模式 ​四、数据交换 五、多从机配置 1、常规SPI模式 2、菊花链模式 一、简介 串行外设接口&#xff08;SPI&#xff09;是微控制器和外围IC&#xff08;如传感器、ADC、DAC、移位寄存器、SRAM等&#xff09;之间使用最广泛的接口之一。…

SpringBoot【2】集成 MyBatis Plus

SpringBoot 集成 MyBatis Plus 前言修改 pom.xml修改配置文件添加 实体类添加 持久层接口添加 持久层 XxxMapper.xml 文件添加 业务接口层添加 业务接口实现类添加 控制层添加 MyBatis 配置AutoFillMetaObjectHandlerMyBatisPlusConfig 验证 前言 由于 MySQL 备份/恢复测试&am…

Spring-JdbcTemplate

了解知道即可 JdbcTemplate环境配置 先加入依赖&#xff1a; 在pom.xml中要引入spring和mysql的依赖&#xff1a; <!--仓库和依赖--><repositories><repository><id>spring-milestones</id><name>Spring Milestones</name><ur…

Java阻塞队列:ArrayBlockingQueue

Java阻塞队列&#xff1a;ArrayBlockingQueue ArrayBlockingQueue是Java中的一个阻塞队列&#xff08;Blocking Queue&#xff09;实现&#xff0c;它是线程安全的&#xff0c;并且基于数组实现。ArrayBlockingQueue常用于生产者-消费者模型&#xff0c;在这种模型中&#xff…

某集团数字化转型蓝图规划项目案例(94页PPT)

案例介绍&#xff1a; 本集团数字化转型蓝图规划项目通过确定目标&#xff0c;如制定集团数字化转型的整体战略和规划&#xff0c;明确转型方向和目标。构建数字化业务体系&#xff0c;实现业务流程数字化、智能化。搭建数字化管理平台&#xff0c;提升集团内部的管理效率和决…

Pyshark——安装、解析pcap文件

1、简介 PyShark是一个用于网络数据包捕获和分析的Python库&#xff0c;基于著名的网络协议分析工具Wireshark和其背后的libpcap/tshark库。它提供了一种便捷的方式来处理网络流量&#xff0c;适用于需要进行网络监控、调试和研究的场景。以下是PyShark的一些关键特性和使用方…

C语言期末考试大纲详解

一&#xff1a; C语言的基本概念 C语言是一种通用的、过程式的计算机编程语言&#xff0c;设计提供了低级内存访问和简单、灵活的语言结构。以下是关于C语言的一些基本概念和组成部分的详细解释。 文件扩展名 .c&#xff1a;这是C语言源代码文件的扩展名。它包含了程序员编…

Noisee 和 Suno创作十二生肖震撼视频 – 有详细的实操步骤

历史文章 日赚800&#xff0c;利用淘宝/闲鱼进行AI音乐售卖实操 如何让AI生成自己喜欢的歌曲-AI音乐创作的正确方式 抖音主播/电商人员有福了&#xff0c;利用Suno创作产品宣传&#xff0c;让产品动起来-小米Su7 用sunoAI写粤语歌的方法&#xff0c;博主已经亲自实践可行 …

docker desktop for mac os如何使用本地代理

在macbook上弄了个代理&#xff0c;然后按照网上所说的去配代理 然后测试下 docker pull busybox 结果无反应&#xff0c;超时。我去&#xff01;&#xff01;&#xff01; 鼓捣了半天&#xff0c;看了docker官网&#xff0c;问了chatgpt &#xff0c;按照它们所说的试了下也没…

想学编程,什么语言最好上手?

Python是许多初学者的首选&#xff0c;因为它的语法简洁易懂&#xff0c;而且有丰富的资源和社区支持。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频 讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;…

Gone框架介绍26 - Gone v1.x 版本 正式发布,更加强大的依赖注入,更加卓越的执行效率

gone是可以高效开发Web服务的Golang依赖注入框架 github地址&#xff1a;https://github.com/gone-io/gone 文档地址&#xff1a;https://goner.fun/zh/ 文章目录 优化和新特性gone 核心功能增强内置Goners覆盖测试 后续计划 优化和新特性 gone 核心功能增强 重构了函数参数依…

【区分】累次极限与二重极限

累次极限与二重极限不要混淆&#xff0c;区分好下面5个命题

Python学习笔记13 -- API的说明及使用

一、API说明 1、API&#xff1a;Application Programming Interface -- 接口 2、Restful API&#xff1a;基于网页的API 3、JSON&#xff1a;JavaScript objection Notation 4、很多数据都可以找到公用API 二、安装requests模块 在终端输入&#xff1a; 可以保证使用当前…

单片机多个中断源时的设计思路,(51为例)工作寄存器R0-R7

51单片机中四组工作寄存器&#xff08;R0-R7&#xff09; 参考 可以看出每个工作寄存器区有8个字节即为R0-R7&#xff0c;当不指定使用哪个工作寄存器区的时候默认0区。其他工作区作为普通的RAM使用。特殊功能寄存器中有可以位寻址和不能位寻址的区域 下面文字引用 通过修改…

常用静止轨道卫星(geostationary satellite)及相关产品

1. 数据简介 维基百科 link 地球静止轨道&#xff08;或称地球赤道同步轨道&#xff0c;英语&#xff1a;geostationary orbit&#xff0c;简写&#xff1a;GEO&#xff09;是指地球赤道面上方35,786km的圆形轨道&#xff0c;该轨道上航天器的运行方向和地球自转方向一致。在…

使用python绘制三维散点图

使用python绘制三维散点图 三维散点图三维散点图的用途效果代码 三维散点图 三维散点图&#xff08;3D Scatter Plot&#xff09;是一种用于展示三维数据的图表。与二维散点图类似&#xff0c;三维散点图通过点在三维空间中的位置来表示数据点的三个特征。每个点在 x、y 和 z …

突破数据存储瓶颈!转转业财系统亿级数据存储优化实践--图文解析

突破数据存储瓶颈&#xff01;转转业财系统亿级数据存储优化实践–图文解析 原文链接&#xff1a;https://juejin.cn/post/7358704806779437097 原文作者&#xff1a;转转技术团队 业财系统&#xff1a;业务和财务一体化系统 与传统财务记账不同&#xff0c;一笔金额不再是…

【Python网络爬虫分步走】使用LXML解析网页数据

Python网络爬虫分步走 – 使用LXML解析网页数据 Web Scraping in Python - Using LXML to Parse Web Data By Jackson@ML Lxml作为Python的第三方库,提供易用的且功能强大的API,用来解析XML和HTML文档。事件驱动的API被用于分步骤解析。 本文简要介绍使用lxml库解析网页的基…