年栾洪全单页做网站教程,免费论坛建站,定州做网站,网站建设 腾云1 条件渲染
使用条件渲染#xff0c;结合TodoList案例#xff0c;进行完善#xff0c;实现以下功能#xff1a;
当列表中的数据为空的时候#xff0c;现实提示信息暂无待办事项当列表中存在数据的时候#xff0c;提示信息消失 这里介绍三种实现方式。 注意这里的Empty是…1 条件渲染
使用条件渲染结合TodoList案例进行完善实现以下功能
当列表中的数据为空的时候现实提示信息暂无待办事项当列表中存在数据的时候提示信息消失 这里介绍三种实现方式。 注意这里的Empty是前端框架Antd的组件如果安装了antd直接使用即可如果没有安装可以用div代替也是可以的。这里为了更直观所以使用了前端框架antd的Empty组件。
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.cssexport 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() // 非常推荐传参数}}添加/Buttonul{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 ;}
}
