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的版本代码&…

python 警告信息屏蔽

python 中安装比较旧版本包时&#xff0c;会出现一些 deprecated 警告&#xff0c;虽然包可正常使用&#xff0c;但过多的警告非常影响信息的查看。对于这些警告&#xff0c;笔者一般有2种方式进行屏蔽。 方法一&#xff1a;使用warnings import warningswarnings.filterwar…

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…

一文入门机器学习

一、什么是机器学习&#xff1f; OR 机器学习能帮我们做什么&#xff1f; 一句白话&#xff1a;人类在“创造、情感思维、灵活性”等方面拥有与生俱来的天赋&#xff0c;但是在处理“海量、复杂的数据”问题方面非常低效&#xff0c;而机器学习就是由人类创造出来高效解决这类…

Java8,11,17的新特性(待补充)

Java 8 新特性 Lambda 表达式&#xff1a; 引入了函数式编程的概念&#xff0c;使代码更简洁&#xff0c;增强了集合处理能力。 示例&#xff1a; List<String> names Arrays.asList("John", "Jane", "Tom"); names.forEach(name ->…

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…

[英语单词] ellipsize,动词化后缀 -ize

openvswitch manual里的一句话&#xff1a;里面有使用ellipsize&#xff0c;但是查字典是没有这个单词&#xff0c;这就是创造出来的动词。将单词ellipsis&#xff0c;加动词化后缀&#xff0c;-ize。 Often we ellipsize arguments not important to the discussion, e.g.: &…

了解protoStuff

&#x1f47d;System.out.println(“&#x1f44b;&#x1f3fc;嗨&#xff0c;大家好&#xff0c;我是代码不会敲的小符&#xff0c;目前工作于上海某电商服务公司…”); &#x1f4da;System.out.println(“&#x1f388;如果文章中有错误的地方&#xff0c;恳请大家指正&…

一文了解IO流

主要是背八股太枯燥了&#xff0c;而且目前很少用这个知识点&#xff0c;所以总结一下&#xff0c;方便记忆。 IO流&#xff08;输入/输出流&#xff09;在Java中是一个核心概念&#xff0c;广泛用于数据的读取和写入。IO流主别用于处理所有输入和输出操作&#xff0c;无论数据…

某集团数字化转型蓝图规划项目案例(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;…

Web前端中表示上标:深度解析与实战技巧

Web前端中表示上标&#xff1a;深度解析与实战技巧 在Web前端开发中&#xff0c;表示上标是一个常见的需求&#xff0c;尤其是在处理数学公式、化学符号或者其他需要特殊格式化的文本时。本文将从四个方面、五个方面、六个方面和七个方面深入探讨如何在Web前端中表示上标&…

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

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