react笔记（七）：空状态组件

空状态

在没有数据或者访问未定义路由页面404时，页面会出现一个图片和一个暂无数据的提示文本，404页面还要加一个返回首页的按钮，我暂时没有加

思路：

空状态容器元素。中间放一张图片，图片下一行提示信息，然后通过props提供自定义配置，比如是否显示图片，图片加载错误时的占位图片，图片尺寸，图片路径，自定义文本信息

新建empty.tsx文件

图片组件是我自己另外封装的一个组件，前面文章有，方便自定义默认占位图和图片加载错误时的占位图

import React from 'react'
import Image from './image'
import './empty.css'

interface EmptyProps {
    isImg?: boolean,//是否显示图片
    src?: string,//图片路径
    size?: number,//图片高和宽
    title?: string,//文字
    error?: string,//图片错误时默认占位图
}

function Empty (props:EmptyProps) {
    //设置isImg默认值，如果props无配置，默认显示图片
    let isImg = props.isImg || true;
    //设置src默认值
    let src = props.src || '';
    //设置size默认值
    let size = props.size || 150;
    //设置title默认值
    let title = props.title || '暂无数据';

    let empty;
    // 判断是否显示图片
    if(isImg){
        empty = <div className="empty-box">
                    <Image className={'empty-box-img'} src={src} width={size} height={size} error={props.error}></Image>
                    <p className="empty-box-title">{title}</p>
                </div>;
    }else{
        empty = <div className="empty-box">
                    <p className="empty-box-title">{title}</p>
                </div>;
    }
    return (
        <div className="empty">
           {empty}
        </div>
    )
}

export default Empty;

import React from 'react'
import Image from './image'
import './empty.css'

interface EmptyProps {
    isImg?: boolean,//是否显示图片
    src?: string,//图片路径
    size?: number,//图片高和宽
    title?: string,//文字
    error?: string,//图片错误时默认占位图
}

function Empty (props:EmptyProps) {
    //设置isImg默认值，如果props无配置，默认显示图片
    let isImg = props.isImg || true;
    //设置src默认值
    let src = props.src || '';
    //设置size默认值
    let size = props.size || 150;
    //设置title默认值
    let title = props.title || '暂无数据';

    let empty;
    // 判断是否显示图片
    if(isImg){
        empty = <div className="empty-box">
                    <Image className={'empty-box-img'} src={src} width={size} height={size} error={props.error}></Image>
                    <p className="empty-box-title">{title}</p>
                </div>;
    }else{
        empty = <div className="empty-box">
                    <p className="empty-box-title">{title}</p>
                </div>;
    }
    return (
        <div className="empty">
           {empty}
        </div>
    )
}

export default Empty;

css文件

css

.empty{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.empty-box{
   text-align: center;
}
.empty-box-img{
    margin-bottom: 20px;
}
.empty-box-title{
    font-size: var(--font-size-base);
    color: var(--color-font-shallow);
}

.empty{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.empty-box{
   text-align: center;
}
.empty-box-img{
    margin-bottom: 20px;
}
.empty-box-title{
    font-size: var(--font-size-base);
    color: var(--color-font-shallow);
}

调用

并自定义宽和高

html

import Empty from '../components/widget/empty'
 
 <Empty size={100}></Empty>

import Empty from '../components/widget/empty'
 
 <Empty size={100}></Empty>

效果

图片路径没有填写，image组件我已经配置自定义默认图片

本文到此结束。

反馈信息

INFO

邮箱： open_teams@163.com

react笔记（七）：空状态组件 ​

反馈信息 ​

react笔记（七）：空状态组件

反馈信息