Result结果

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

何时使用

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

代码演示

Successfully Purchased Cloud Server ECS!

Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.

Success

成功的结果。

TypeScript
JavaScript
import React from 'react';
import { Button, Result } from 'antd';

const App: React.FC = () => (
  <Result
    status="success"
    title="Successfully Purchased Cloud Server ECS!"
    subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
    extra={[
      <Button type="primary" key="console">
        Go Console
      </Button>,
      <Button key="buy">Buy Again</Button>,
    ]}
  />
);

export default App;

Your operation has been executed

Info

展示处理结果。

TypeScript
JavaScript
import React from 'react';
import { Button, Result } from 'antd';

const App: React.FC = () => (
  <Result
    title="Your operation has been executed"
    extra={
      <Button type="primary" key="console">
        Go Console
      </Button>
    }
  />
);

export default App;

There are some problems with your operation.

Warning

警告类型的结果。

TypeScript
JavaScript
import React from 'react';
import { Button, Result } from 'antd';

const App: React.FC = () => (
  <Result
    status="warning"
    title="There are some problems with your operation."
    extra={
      <Button type="primary" key="console">
        Go Console
      </Button>
    }
  />
);

export default App;

403

Sorry, you are not authorized to access this page.

403

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

TypeScript
JavaScript
import React from 'react';
import { Button, Result } from 'antd';

const App: React.FC = () => (
  <Result
    status="403"
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={<Button type="primary">Back Home</Button>}
  />
);

export default App;

404

Sorry, the page you visited does not exist.

404

此页面未找到。

TypeScript
JavaScript
import React from 'react';
import { Button, Result } from 'antd';

const App: React.FC = () => (
  <Result
    status="404"
    title="404"
    subTitle="Sorry, the page you visited does not exist."
    extra={<Button type="primary">Back Home</Button>}
  />
);

export default App;

500

Sorry, something went wrong.

500

服务器发生了错误。

TypeScript
JavaScript
import React from 'react';
import { Button, Result } from 'antd';

const App: React.FC = () => (
  <Result
    status="500"
    title="500"
    subTitle="Sorry, something went wrong."
    extra={<Button type="primary">Back Home</Button>}
  />
);

export default App;

Submission Failed

Please check and modify the following information before resubmitting.

The content you submitted has the following error:

Your account has been frozen. Thaw immediately >

Your account is not yet eligible to apply. Apply Unlock >

Error

复杂的错误反馈。

TypeScript
JavaScript
import React from 'react';
import { CloseCircleOutlined } from '@ant-design/icons';
import { Button, Result, Typography } from 'antd';

const { Paragraph, Text } = Typography;

const App: React.FC = () => (
  <Result
    status="error"
    title="Submission Failed"
    subTitle="Please check and modify the following information before resubmitting."
    extra={[
      <Button type="primary" key="console">
        Go Console
      </Button>,
      <Button key="buy">Buy Again</Button>,
    ]}
  >
    <div className="desc">
      <Paragraph>
        <Text
          strong
          style={{
            fontSize: 16,
          }}
        >
          The content you submitted has the following error:
        </Text>
      </Paragraph>
      <Paragraph>
        <CloseCircleOutlined className="site-result-demo-error-icon" /> Your account has been
        frozen. <a>Thaw immediately &gt;</a>
      </Paragraph>
      <Paragraph>
        <CloseCircleOutlined className="site-result-demo-error-icon" /> Your account is not yet
        eligible to apply. <a>Apply Unlock &gt;</a>
      </Paragraph>
    </div>
  </Result>
);

export default App;
.site-result-demo-error-icon {
  color: red;
}

Great, we have done all the operations!

自定义 icon

自定义 icon。

TypeScript
JavaScript
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Button, Result } from 'antd';

const App: React.FC = () => (
  <Result
    icon={<SmileOutlined />}
    title="Great, we have done all the operations!"
    extra={<Button type="primary">Next</Button>}
  />
);

export default App;

API

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

import React from 'react'; import { Button, Result } from 'antd'; const App: React.FC = () => ( <Result status="success" title="Successfully Purchased Cloud Server ECS!" subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait." extra={[ <Button type="primary" key="console"> Go Console </Button>, <Button key="buy">Buy Again</Button>, ]} /> ); export default App;

import React from 'react'; import { Button, Result } from 'antd'; const App: React.FC = () => ( <Result title="Your operation has been executed" extra={ <Button type="primary" key="console"> Go Console </Button> } /> ); export default App;

import React from 'react'; import { Button, Result } from 'antd'; const App: React.FC = () => ( <Result status="warning" title="There are some problems with your operation." extra={ <Button type="primary" key="console"> Go Console </Button> } /> ); export default App;

import React from 'react'; import { Button, Result } from 'antd'; const App: React.FC = () => ( <Result status="403" title="403" subTitle="Sorry, you are not authorized to access this page." extra={<Button type="primary">Back Home</Button>} /> ); export default App;

import React from 'react'; import { Button, Result } from 'antd'; const App: React.FC = () => ( <Result status="404" title="404" subTitle="Sorry, the page you visited does not exist." extra={<Button type="primary">Back Home</Button>} /> ); export default App;

import React from 'react'; import { Button, Result } from 'antd'; const App: React.FC = () => ( <Result status="500" title="500" subTitle="Sorry, something went wrong." extra={<Button type="primary">Back Home</Button>} /> ); export default App;

import React from 'react'; import { CloseCircleOutlined } from '@ant-design/icons'; import { Button, Result, Typography } from 'antd'; const { Paragraph, Text } = Typography; const App: React.FC = () => ( <Result status="error" title="Submission Failed" subTitle="Please check and modify the following information before resubmitting." extra={[ <Button type="primary" key="console"> Go Console </Button>, <Button key="buy">Buy Again</Button>, ]} > <div className="desc"> <Paragraph> <Text strong style={{ fontSize: 16, }} > The content you submitted has the following error: </Text> </Paragraph> <Paragraph> <CloseCircleOutlined className="site-result-demo-error-icon" /> Your account has been frozen. <a>Thaw immediately ></a> </Paragraph> <Paragraph> <CloseCircleOutlined className="site-result-demo-error-icon" /> Your account is not yet eligible to apply. <a>Apply Unlock ></a> </Paragraph> </div> </Result> ); export default App;

import React from 'react'; import { SmileOutlined } from '@ant-design/icons'; import { Button, Result } from 'antd'; const App: React.FC = () => ( <Result icon={<SmileOutlined />} title="Great, we have done all the operations!" extra={<Button type="primary">Next</Button>} /> ); export default App;

参数

说明

类型

默认值

extra

操作区

ReactNode

icon

自定义 icon

ReactNode

status

结果的状态，决定图标和颜色

success | error | info | warning | 404 | 403 | 500

info

subTitle

subTitle 文字

ReactNode

title

title 文字

ReactNode

Ant Design

Result结果

Ant Design

Result结果

何时使用

代码演示

API

何时使用

代码演示

API