Ant Design的Empty组件如何自定义提示内容和按钮跳转？

端木怡彤提问于 2026-02-08 19:07:24 阅读 35

组件

在做用户订单列表页时，想用Empty组件显示空状态，但发现官网的示例只能显示默认文案和图片。我想自定义提示文案加一个「去添加商品」的按钮跳转，尝试把按钮套在

里放在Empty下面，结果布局错位了。

试过这样写：


<Empty
  description={<span>您还没有订单哦</span>}
/>
<div>
  <a-button onClick={() => history.push('/product')}>去添加</a-button>
</div>

但按钮总是在Empty图标下方留出很大空白，而且点击没反应，是什么原因啊？

我来解答赞 6 收藏

反馈

2 条解答

轩辕园园 Lv1

你这个写法问题出在把按钮单独用 div 包裹放在 Empty 组件外面了，这样 React 渲染出来就是两个独立的块级元素，Empty 自带的间距会和你的按钮容器产生叠加空白，而且事件绑定可能因为组件卸载没生效。

正确的做法是利用 Empty 组件的 description 属性支持 ReactNode 的特性，直接把文案和按钮一起塞进去。另外 onClick 没反应可能是 history 作用域的问题，建议用 useNavigate（React Router v6）或者确保 this 指向正确。

给你个能跑的写法：

import { Empty } from 'antd';

import { useNavigate } from 'react-router-dom';



function OrderList() {

  const navigate = useNavigate();



  return (

    <div style={{ textAlign: 'center', marginTop: 24 }}>

      <Empty

        image={Empty.PRESENTED_IMAGE_SIMPLE}

        description={

          <>

            <p>您还没有订单哦</p>

            <button 

              onClick={() => navigate('/product')} 

              style={{

                padding: '8px 16px',

                border: 'none',

                backgroundColor: '#1890ff',

                color: '#fff',

                borderRadius: 4,

                cursor: 'pointer'

              }}

            >

              去添加商品

            </button>

          >

        }

      />

    </div>

  );

}

核心点：

- 把 button 和 p 标签都塞进 description 里，让它们和图标保持在同一个组件结构内
- 不要用 a-button 这种老写法，如果是 Ant Design 5.x 记得用 Button 组件 import 进来
- 外层加个居中样式避免偏左
- 路由跳转优先用 hooks，比 history.push 更稳

数据库层面其实不影响这种 UI 逻辑，但如果你是从接口判断 data.length === 0 才渲染 Empty，记得加 loading 状态防抖，不然容易闪屏。

2026-02-10 16:07

子璇 ☘︎ Lv1

这问题我踩过血泪教训。你现在的写法把按钮放在Empty外面，React组件是独立渲染的，那个大空白是Empty组件内部留的间距，你再塞个div进去肯定布局乱套。

正确的做法是用Empty的description属性传入JSX，把文案和按钮一起包进去。但注意，description只接受ReactNode，不能直接扔个带事件的button进去就完事，还得处理样式对齐。

给你个能跑的写法：

import { Empty, Button } from 'antd';

import { useNavigate } from 'react-router-dom';



function OrderList() {

  const navigate = useNavigate();



  return (

    <div style={{ textAlign: 'center', marginTop: 24 }}>

      <Empty

        image={Empty.PRESENTED_IMAGE_SIMPLE}

        description={

          <>

            <span>您还没有订单哦</span><br />

            <Button 

              type="primary" 

              size="small" 

              onClick={() => navigate('/product')}

              style={{ marginTop: 8 }}

            >

              去添加商品

            </Button>

          </>

        }

      />

    </div>

  );

}

关键点三个：一是把按钮塞进description里，二是用br或者改行内样式控制换行，三是外层加个text-align:center让内容居中对齐图标。onClick用navigate跳转别用history，v6之后history.push在外层组件不生效是常见坑。

另外提醒一句，别自己手写margin-bottom去调那个空隙，Empty组件更新后可能又错位，得不偿失。

2026-02-08 21:01