Result结果

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

何时使用

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

代码演示

基本

默认支持的各种状态的展示。

import { Result, Radio, Button } from 'antd';
const StatusMap = {
  '403': {
    title: '403',
    subTitle: 'Sorry, you are not authorized to access this page.',
    extra: <Button type="primary">Back Home</Button>,
  },
  '404': {
    title: '404',
    subTitle: 'Sorry, the page you visited does not exist.',
    extra: <Button type="primary">Back Home</Button>,
  },
  '500': {
    title: '500',
    subTitle: 'Sorry, the server is wrong.',
    extra: <Button type="primary">Back Home</Button>,
  },
  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>,
    ],
  },
  info: {
    title: 'Your operation has been executed',
    extra: (
      <Button type="primary" key="console">
        Go Console
      </Button>
    ),
  },
  error: {
    title: 'Submission Failed',
    subTitle: 'Please check and modify the following information before resubmitting.',
    extra: [
      <Button type="primary" key="console">
        Go Console
      </Button>,
    ],
  },
  warning: {
    title: 'There are some problems with your operation.',
    extra: (
      <Button type="primary" key="console">
        Go Console
      </Button>
    ),
  },
};
const StatusArray = Object.keys(StatusMap);
class ResultDemo extends React.Component {
  state = {
    status: '403',
  };
  onChange = e => {
    console.log('status checked', e.target.value);
    this.setState({
      status: e.target.value,
    });
  };
  render() {
    const { status } = this.state;
    const resultProps = StatusMap[status];
    return (
      <div>
        <p>
          <Radio.Group onChange={this.onChange} value={status}>
            {StatusArray.map(statusItem => (
              <Radio value={statusItem}>{statusItem}</Radio>
            ))}
          </Radio.Group>
        </p>
        <Result status={status} {...resultProps} />
      </div>
    );
  }
}
ReactDOM.render(<ResultDemo />, mountNode);

复杂的例子

提供更加复杂的反馈。

import { Result, Button, Icon, Typography } from 'antd';
const { Title, Paragraph } = Typography;
ReactDOM.render(
  <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">
      <Title level={4}>The content you submitted has the following error:</Title>
      <Paragraph>
        <Icon style={{ color: 'red' }} type="close-circle" /> Your account has been frozen{' '}
        <a>Thaw immediately &gt;</a>
      </Paragraph>
      <Paragraph>
        <Icon type="close-circle" /> Your account is not yet eligible to apply{' '}
        <a>Apply immediately &gt;</a>
      </Paragraph>
    </div>
  </Result>,
  mountNode,
);

自定义 icon

自定义 icon。

import { Result, Icon, Button } from 'antd';
ReactDOM.render(
  <Result
    icon={<Icon type="smile" theme="twoTone" />}
    title="Great, we have done all the operations!"
    extra={<Button type="primary">Next</Button>}
  />,
  mountNode,
);

API