Alert警告提示

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

何时使用

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

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

代码演示

Alert警告提示 - 图1

基本

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

TypeScript

JavaScript

Alert警告提示 - 图2

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

Alert警告提示 - 图3

可关闭的警告提示

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

TypeScript

JavaScript

Alert警告提示 - 图4

  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. <>
  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. </>,
  21. mountNode,
  22. );

Alert警告提示 - 图5

图标

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

TypeScript

JavaScript

Alert警告提示 - 图6

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <>
  4. <Alert message="Success Tips" type="success" showIcon />
  5. <Alert message="Informational Notes" type="info" showIcon />
  6. <Alert message="Warning" type="warning" showIcon closable />
  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. closable
  26. />
  27. <Alert
  28. message="Error"
  29. description="This is an error message about copywriting."
  30. type="error"
  31. showIcon
  32. />
  33. </>,
  34. mountNode,
  35. );

Alert警告提示 - 图7

顶部公告

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

TypeScript

JavaScript

Alert警告提示 - 图8

  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警告提示 - 图9

平滑地卸载

平滑、自然的卸载提示。

TypeScript

JavaScript

Alert警告提示 - 图10

  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警告提示 - 图11

操作

可以在右上角自定义操作项。

TypeScript

JavaScript

Alert警告提示 - 图12

  1. import React from 'react';
  2. import { Alert, Button, Space } from 'antd';
  3. ReactDOM.render(
  4. <>
  5. <Alert
  6. message="Success Tips"
  7. type="success"
  8. showIcon
  9. action={
  10. <Button size="small" type="text">
  11. UNDO
  12. </Button>
  13. }
  14. closable
  15. />
  16. <Alert
  17. message="Error Text"
  18. showIcon
  19. description="Error Description Error Description Error Description Error Description"
  20. type="error"
  21. action={
  22. <Button size="small" danger>
  23. Detail
  24. </Button>
  25. }
  26. />
  27. <Alert
  28. message="Warning Text"
  29. type="warning"
  30. action={
  31. <Space>
  32. <Button size="small" type="ghost">
  33. Done
  34. </Button>
  35. </Space>
  36. }
  37. closable
  38. />
  39. <Alert
  40. message="Info Text"
  41. description="Info Description Info Description Info Description Info Description"
  42. type="info"
  43. action={
  44. <Space direction="vertical">
  45. <Button size="small" type="primary">
  46. Accept
  47. </Button>
  48. <Button size="small" danger type="ghost">
  49. Decline
  50. </Button>
  51. </Space>
  52. }
  53. closable
  54. />
  55. </>,
  56. mountNode,
  57. );

Alert警告提示 - 图13

四种样式

共有四种样式 successinfowarningerror

TypeScript

JavaScript

Alert警告提示 - 图14

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <>
  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. </>,
  9. mountNode,
  10. );

Alert警告提示 - 图15

含有辅助性文字介绍

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

TypeScript

JavaScript

Alert警告提示 - 图16

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <>
  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. </>,
  25. mountNode,
  26. );

Alert警告提示 - 图17

自定义关闭

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

TypeScript

JavaScript

Alert警告提示 - 图18

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

Alert警告提示 - 图19

轮播的公告

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

TypeScript

JavaScript

Alert警告提示 - 图20

  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警告提示 - 图21

React 错误处理

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

TypeScript

JavaScript

Alert警告提示 - 图22

  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 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

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

Alert.ErrorBoundary

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