Result组件的extra插槽内容不显示是怎么回事？

Newb.静云提问于 2026-03-27 17:02:21 阅读 2

组件

我在用Ant Design的Result组件时，想在extra区域加个返回按钮，但写完发现按钮根本没渲染出来，控制台也没报错，是我写法有问题吗？

我试过直接写JSX和用函数返回，都不行。代码大概是这样的：

import { Result, Button } from 'antd';

function MyPage() {
  return (
    <Result
      status="success"
      title="提交成功"
      extra={<Button onClick={() => history.back()}>返回</Button>}
    />
  );
}

我来解答赞 0 收藏

反馈

1 条解答

诗雅 Dev Lv1

看起来你遇到了Result组件的extra插槽内容不显示的问题。别担心，我来帮你一步步解决。

首先你要确认使用的Ant Design版本，因为不同版本对插槽的支持可能有差异。在较新的版本中，Result组件确实支持extra属性来放置额外的操作按钮。

你的代码基本思路是对的，但让我们检查几个可能影响渲染的地方。下面是修正后的完整代码示例：

import React from 'react';

import { Result, Button } from 'antd';



function MyPage() {

  // 确保history对象可用，这里假设你在React Router环境中

  const goBack = () => {

    window.history.back(); // 使用window对象作为后备方案

  };



  return (

    <Result

      status="success" // 这个没问题

      title="提交成功" 

      extra={(

        <Button type="primary" onClick={goBack}>返回</Button>

      )} // 注意这里用了一个小括号包裹

    />

  );

}

有几个关键点需要注意：
1. 确保你的项目正确引入了antd样式文件，不然即使渲染出来了也看不到效果。
2. 我给Button加了个type="primary"属性，这样按钮会更显眼一些，默认情况下可能不太明显。
3. extra属性里的JSX需要适当包裹，比如加上小括号或者花括号，避免语法解析问题。

原理上来说，Result组件的extra属性就是一个插槽，它接受一个React元素或者函数返回的React元素。只要传入的内容是合法的React元素，它就应该正常渲染出来。

如果你还是看不到按钮，试着检查一下浏览器开发者工具中的Elements面板，看看这个节点是不是真的没渲染出来，还是只是被其他样式隐藏了。有时候CSS布局问题也会导致组件不可见。

2026-03-27 17:03