基本
四种样式
可关闭的警告提示
含有辅助性文字介绍
图标
自定义关闭
顶部公告
轮播的公告
平滑地卸载
ErrorBoundary
API

Alert警告提示

警告提示，展现需要关注的信息。

何时使用#

当某个页面需要向用户显示警告的信息时。
非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

代码演示

Success Text

基本

最简单的用法，适用于简短的警告提示。

TypeScript
JavaScript
import { Alert } from 'antd';

ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);

Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text

Error TextError Description Error Description Error Description Error Description Error Description Error Description

可关闭的警告提示

显示关闭按钮，点击可关闭警告提示。

TypeScript
JavaScript
import { Alert } from 'antd';

const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  console.log(e, 'I was closed.');
};

ReactDOM.render(
  <>
    <Alert
      message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
      type="warning"
      closable
      onClose={onClose}
    />
    <Alert
      message="Error Text"
      description="Error Description Error Description Error Description Error Description Error Description Error Description"
      type="error"
      closable
      onClose={onClose}
    />
  </>,
  mountNode,
);

Success Tips

Informational Notes

Warning

Error

Success TipsDetailed description and advice about successful copywriting.

Informational NotesAdditional description and information about copywriting.

WarningThis is a warning notice about copywriting.

ErrorThis is an error message about copywriting.

图标

可口的图标让信息类型更加醒目。

TypeScript
JavaScript
import { Alert } from 'antd';

ReactDOM.render(
  <>
    <Alert message="Success Tips" type="success" showIcon />
    <Alert message="Informational Notes" type="info" showIcon />
    <Alert message="Warning" type="warning" showIcon closable />
    <Alert message="Error" type="error" showIcon />
    <Alert
      message="Success Tips"
      description="Detailed description and advice about successful copywriting."
      type="success"
      showIcon
    />
    <Alert
      message="Informational Notes"
      description="Additional description and information about copywriting."
      type="info"
      showIcon
    />
    <Alert
      message="Warning"
      description="This is a warning notice about copywriting."
      type="warning"
      showIcon
      closable
    />
    <Alert
      message="Error"
      description="This is an error message about copywriting."
      type="error"
      showIcon
    />
  </>,
  mountNode,
);

顶部公告

页面顶部通告形式，默认有图标且 type 为 'warning'。

TypeScript
JavaScript
import { Alert } from 'antd';

ReactDOM.render(
  <>
    <Alert message="Warning text" banner />
    <br />
    <Alert
      message="Very long warning text warning text text text text text text text"
      banner
      closable
    />
    <br />
    <Alert showIcon={false} message="Warning text without icon" banner />
    <br />
    <Alert type="error" message="Error text" banner />
  </>,
  mountNode,
);

Alert Message Text

placeholder text here

平滑地卸载

平滑、自然的卸载提示。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Alert } from 'antd';

const App: React.FC = () => {
  const [visible, setVisible] = useState(true);
  const handleClose = () => {
    setVisible(false);
  };
  return (
    <div>
      {visible ? (
        <Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
      ) : null}
      <p>placeholder text here</p>
    </div>
  );
};

ReactDOM.render(<App />, mountNode);

Success Text

Info Text

Warning Text

Error Text

四种样式

共有四种样式 success、info、warning、error。

TypeScript
JavaScript
import { Alert } from 'antd';

ReactDOM.render(
  <>
    <Alert message="Success Text" type="success" />
    <Alert message="Info Text" type="info" />
    <Alert message="Warning Text" type="warning" />
    <Alert message="Error Text" type="error" />
  </>,
  mountNode,
);

Success TextSuccess Description Success Description Success Description

Info TextInfo Description Info Description Info Description Info Description

Warning TextWarning Description Warning Description Warning Description Warning Description

Error TextError Description Error Description Error Description Error Description

含有辅助性文字介绍

含有辅助性文字介绍的警告提示。

TypeScript
JavaScript
import { Alert } from 'antd';

ReactDOM.render(
  <>
    <Alert
      message="Success Text"
      description="Success Description Success Description Success Description"
      type="success"
    />
    <Alert
      message="Info Text"
      description="Info Description Info Description Info Description Info Description"
      type="info"
    />
    <Alert
      message="Warning Text"
      description="Warning Description Warning Description Warning Description Warning Description"
      type="warning"
    />
    <Alert
      message="Error Text"
      description="Error Description Error Description Error Description Error Description"
      type="error"
    />
  </>,
  mountNode,
);

Info Text

自定义关闭

可以自定义关闭，自定义的文字会替换原先的关闭 Icon。

TypeScript
JavaScript
import { Alert } from 'antd';

ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);

轮播的公告

配合 react-text-loop 实现消息轮播通知栏。

TypeScript
JavaScript
import { Alert } from 'antd';
import TextLoop from 'react-text-loop';

ReactDOM.render(
  <Alert
    banner
    message={
      <TextLoop mask>
        <div>Notice message one</div>
        <div>Notice message two</div>
        <div>Notice message three</div>
        <div>Notice message four</div>
      </TextLoop>
    }
  />,
  mountNode,
);

ErrorBoundary

友好的 React 错误处理包裹组件。

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

const { ErrorBoundary } = Alert;
const ThrowError: React.FC = () => {
  const [error, setError] = useState<Error>();
  const onClick = () => {
    setError(new Error('An Uncaught Error'));
  };

  if (error) {
    throw error;
  }
  return (
    <Button type="danger" onClick={onClick}>
      Click me to throw a error
    </Button>
  );
};

ReactDOM.render(
  <ErrorBoundary>
    <ThrowError />
  </ErrorBoundary>,
  mountNode,
);

API#

参数	说明	类型	默认值
afterClose	关闭动画结束后触发的回调函数	() => void	-
banner	是否用作顶部公告	boolean	false
closable	默认不显示关闭按钮	boolean	-
closeText	自定义关闭按钮	string \| ReactNode	-
description	警告提示的辅助性文字介绍	string \| ReactNode	-
icon	自定义图标，`showIcon` 为 true 时有效	ReactNode	-
message	警告提示内容	string \| ReactNode	-
showIcon	是否显示辅助图标	boolean	false，`banner` 模式下默认值为 true
type	指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error`	string	`info`，`banner` 模式下默认值为 `warning`
onClose	关闭时触发的回调函数	(e: MouseEvent) => void	-

Alert.ErrorBoundary#

参数	说明	类型	默认值	版本
message	自定义错误标题，如果未指定会展示原生报错信息	ReactNode	{{ error }}
description	自定义错误内容，如果未指定会展示报错堆栈	ReactNode	{{ error stack }}