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

1 条件渲染

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

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

这里介绍三种实现方式。

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

1、三元操作符

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

2、逻辑与操作符

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

3、css控制

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

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

2、实现效果动图如下

3、完整代码

js 复制代码
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"}
                                        danger
                                        onClick={() => 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, // 生产不同的id
            name: 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 = "";
    }
}
相关推荐
耶啵奶膘34 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro