Alert警告提示

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

何时使用

  • 当某个页面需要向用户显示警告的信息时。

  • 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。

代码演示

Alert警告提示 - 图1

基本

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

TypeScript

JavaScript

  1. import { Alert } from 'antd';
  2. ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);

Alert警告提示 - 图2

可关闭的警告提示

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

TypeScript

JavaScript

  1. import { Alert } from 'antd';
  2. const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  3. console.log(e, 'I was closed.');
  4. };
  5. ReactDOM.render(
  6. <div>
  7. <Alert
  8. message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
  9. type="warning"
  10. closable
  11. onClose={onClose}
  12. />
  13. <Alert
  14. message="Error Text"
  15. description="Error Description Error Description Error Description Error Description Error Description Error Description"
  16. type="error"
  17. closable
  18. onClose={onClose}
  19. />
  20. </div>,
  21. mountNode,
  22. );

Alert警告提示 - 图3

图标

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

TypeScript

JavaScript

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Alert message="Success Tips" type="success" showIcon />
  5. <Alert message="Informational Notes" type="info" showIcon />
  6. <Alert message="Warning" type="warning" showIcon />
  7. <Alert message="Error" type="error" showIcon />
  8. <Alert
  9. message="Success Tips"
  10. description="Detailed description and advice about successful copywriting."
  11. type="success"
  12. showIcon
  13. />
  14. <Alert
  15. message="Informational Notes"
  16. description="Additional description and information about copywriting."
  17. type="info"
  18. showIcon
  19. />
  20. <Alert
  21. message="Warning"
  22. description="This is a warning notice about copywriting."
  23. type="warning"
  24. showIcon
  25. />
  26. <Alert
  27. message="Error"
  28. description="This is an error message about copywriting."
  29. type="error"
  30. showIcon
  31. />
  32. </div>,
  33. mountNode,
  34. );

Alert警告提示 - 图4

顶部公告

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

TypeScript

JavaScript

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <>
  4. <Alert message="Warning text" banner />
  5. <br />
  6. <Alert
  7. message="Very long warning text warning text text text text text text text"
  8. banner
  9. closable
  10. />
  11. <br />
  12. <Alert showIcon={false} message="Warning text without icon" banner />
  13. <br />
  14. <Alert type="error" message="Error text" banner />
  15. </>,
  16. mountNode,
  17. );

Alert警告提示 - 图5

平滑地卸载

平滑、自然的卸载提示。

TypeScript

JavaScript

  1. import React, { useState } from 'react';
  2. import { Alert } from 'antd';
  3. const App: React.FC = () => {
  4. const [visible, setVisible] = useState(true);
  5. const handleClose = () => {
  6. setVisible(false);
  7. };
  8. return (
  9. <div>
  10. {visible ? (
  11. <Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
  12. ) : null}
  13. <p>placeholder text here</p>
  14. </div>
  15. );
  16. };
  17. ReactDOM.render(<App />, mountNode);

Alert警告提示 - 图6

四种样式

共有四种样式 successinfowarningerror

TypeScript

JavaScript

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Alert message="Success Text" type="success" />
  5. <Alert message="Info Text" type="info" />
  6. <Alert message="Warning Text" type="warning" />
  7. <Alert message="Error Text" type="error" />
  8. </div>,
  9. mountNode,
  10. );

Alert警告提示 - 图7

含有辅助性文字介绍

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

TypeScript

JavaScript

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Alert
  5. message="Success Text"
  6. description="Success Description Success Description Success Description"
  7. type="success"
  8. />
  9. <Alert
  10. message="Info Text"
  11. description="Info Description Info Description Info Description Info Description"
  12. type="info"
  13. />
  14. <Alert
  15. message="Warning Text"
  16. description="Warning Description Warning Description Warning Description Warning Description"
  17. type="warning"
  18. />
  19. <Alert
  20. message="Error Text"
  21. description="Error Description Error Description Error Description Error Description"
  22. type="error"
  23. />
  24. </div>,
  25. mountNode,
  26. );

Alert警告提示 - 图8

自定义关闭

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

TypeScript

JavaScript

  1. import { Alert } from 'antd';
  2. ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);

Alert警告提示 - 图9

轮播的公告

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

TypeScript

JavaScript

  1. import { Alert } from 'antd';
  2. import TextLoop from 'react-text-loop';
  3. ReactDOM.render(
  4. <Alert
  5. banner
  6. message={
  7. <TextLoop mask>
  8. <div>Notice message one</div>
  9. <div>Notice message two</div>
  10. <div>Notice message three</div>
  11. <div>Notice message four</div>
  12. </TextLoop>
  13. }
  14. />,
  15. mountNode,
  16. );

Alert警告提示 - 图10

ErrorBoundary

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

TypeScript

JavaScript

  1. import React, { useState } from 'react';
  2. import { Button, Alert } from 'antd';
  3. const { ErrorBoundary } = Alert;
  4. const ThrowError: React.FC = () => {
  5. const [error, setError] = useState<Error>();
  6. const onClick = () => {
  7. setError(new Error('An Uncaught Error'));
  8. };
  9. if (error) {
  10. throw error;
  11. }
  12. return (
  13. <Button type="danger" onClick={onClick}>
  14. Click me to throw a error
  15. </Button>
  16. );
  17. };
  18. ReactDOM.render(
  19. <ErrorBoundary>
  20. <ThrowError />
  21. </ErrorBoundary>,
  22. mountNode,
  23. );

API

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

Alert.ErrorBoundary

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