Result结果

用于反馈一系列操作任务的处理结果。

何时使用

当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用。

代码演示

Result结果 - 图1

Success

成功的结果。

  1. import { Result, Button } from 'antd';
  2. ReactDOM.render(
  3. <Result
  4. status="success"
  5. title="Successfully Purchased Cloud Server ECS!"
  6. subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
  7. extra={[
  8. <Button type="primary" key="console">
  9. Go Console
  10. </Button>,
  11. <Button key="buy">Buy Again</Button>,
  12. ]}
  13. />,
  14. mountNode,
  15. );

Result结果 - 图2

Info

展示处理结果。

  1. import { Result, Button } from 'antd';
  2. ReactDOM.render(
  3. <Result
  4. title="Your operation has been executed"
  5. extra={
  6. <Button type="primary" key="console">
  7. Go Console
  8. </Button>
  9. }
  10. />,
  11. mountNode,
  12. );

Result结果 - 图3

Warning

警告类型的结果。

  1. import { Result, Button } from 'antd';
  2. ReactDOM.render(
  3. <Result
  4. status="warning"
  5. title="There are some problems with your operation."
  6. extra={
  7. <Button type="primary" key="console">
  8. Go Console
  9. </Button>
  10. }
  11. />,
  12. mountNode,
  13. );

Result结果 - 图4

403

你没有此页面的访问权限。

  1. import { Result, Button } from 'antd';
  2. ReactDOM.render(
  3. <Result
  4. status="403"
  5. title="403"
  6. subTitle="Sorry, you are not authorized to access this page."
  7. extra={<Button type="primary">Back Home</Button>}
  8. />,
  9. mountNode,
  10. );

Result结果 - 图5

404

此页面未找到。

  1. import { Result, Button } from 'antd';
  2. ReactDOM.render(
  3. <Result
  4. status="404"
  5. title="404"
  6. subTitle="Sorry, the page you visited does not exist."
  7. extra={<Button type="primary">Back Home</Button>}
  8. />,
  9. mountNode,
  10. );

Result结果 - 图6

500

服务器发生了错误。

  1. import { Result, Button } from 'antd';
  2. ReactDOM.render(
  3. <Result
  4. status="500"
  5. title="500"
  6. subTitle="Sorry, the server is wrong."
  7. extra={<Button type="primary">Back Home</Button>}
  8. />,
  9. mountNode,
  10. );

Result结果 - 图7

Error

复杂的错误反馈。

  1. import { Result, Button, Typography } from 'antd';
  2. import { CloseCircleOutlined } from '@ant-design/icons';
  3. const { Paragraph, Text } = Typography;
  4. ReactDOM.render(
  5. <Result
  6. status="error"
  7. title="Submission Failed"
  8. subTitle="Please check and modify the following information before resubmitting."
  9. extra={[
  10. <Button type="primary" key="console">
  11. Go Console
  12. </Button>,
  13. <Button key="buy">Buy Again</Button>,
  14. ]}
  15. >
  16. <div className="desc">
  17. <Paragraph>
  18. <Text
  19. strong
  20. style={{
  21. fontSize: 16,
  22. }}
  23. >
  24. The content you submitted has the following error:
  25. </Text>
  26. </Paragraph>
  27. <Paragraph>
  28. <CloseCircleOutlined className="site-result-demo-error-icon" /> Your account has been frozen
  29. <a>Thaw immediately &gt;</a>
  30. </Paragraph>
  31. <Paragraph>
  32. <CloseCircleOutlined className="site-result-demo-error-icon" /> Your account is not yet
  33. eligible to apply <a>Apply Unlock &gt;</a>
  34. </Paragraph>
  35. </div>
  36. </Result>,
  37. mountNode,
  38. );
  1. .site-result-demo-error-icon {
  2. color: red;
  3. }

Result结果 - 图8

自定义 icon

自定义 icon。

  1. import { Result, Button } from 'antd';
  2. import { SmileOutlined } from '@ant-design/icons';
  3. ReactDOM.render(
  4. <Result
  5. icon={<SmileOutlined />}
  6. title="Great, we have done all the operations!"
  7. extra={<Button type="primary">Next</Button>}
  8. />,
  9. mountNode,
  10. );

API

参数说明类型默认值
titletitle 文字ReactNode-
subTitlesubTitle 文字ReactNode-
status结果的状态,决定图标和颜色success | error | info | warning | 404 | 403 | 500info
icon自定义 iconReactNode-
extra操作区ReactNode-