ReactJS UI Ant Design 反馈组件完整参考

当我们开发 React 应用时，很多时候需要集成反馈组件。而 Ant Design 中提供了丰富的反馈组件，方便我们轻松地集成到项目中。

消息提示

消息提示可以在页面中展示全局性的操作结果等信息。Ant Design 提供了 message 组件，可以轻松地在应用中添加消息提示功能。

import { message } from 'antd';

// 成功提示
message.success('Action finished successfully!');

// 错误提示
message.error('Action failed!');

更多用法请参考官方文档：https://ant.design/components/message-cn/

模态框

模态框可以在当前页面上弹出一个新的窗口，通常用于展示一些重要的信息或收集用户输入。Ant Design 提供了 Modal 组件，可以实现模态框功能。

import { Modal, Button } from 'antd';

const ExampleModal = ({ visible, onCancel }) => {
  return (
    <Modal
      title="Example Modal"
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          Cancel
        </Button>,
        <Button key="submit" type="primary">
          Submit
        </Button>,
      ]}
    >
      <p>This is an example modal!</p>
    </Modal>
  );
};

// 在父组件中使用
const Demo = () => {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <>
      <Button onClick={showModal}>Show Modal</Button>
      <ExampleModal visible={visible} onCancel={handleCancel} />
    </>
  );
};

更多用法请参考官方文档：https://ant.design/components/modal-cn/

提示框

提示框可以在页面中展示一些需要用户注意的信息，比如表单输入规则、操作注意事项等。Ant Design 提供了 Tooltip 组件，可以实现提示框功能。

import { Tooltip } from 'antd';

<Tooltip title="This is a tooltip!">
  <span>Hover Me</span>
</Tooltip>

更多用法请参考官方文档：https://ant.design/components/tooltip-cn/

加载中标志

当页面需要加载一些数据时，我们希望能够友好地提示用户正在加载，避免用户误解操作未起作用。Ant Design 提供了 Spin 组件，可以实现加载中标志的功能。

import { Spin } from 'antd';

<Spin size="large" />

更多用法请参考官方文档：https://ant.design/components/spin-cn/

进度条

进度条可以在页面中展示某个任务的进度。Ant Design 提供了 Progress 组件，可以实现进度条的功能。

import { Progress } from 'antd';

<Progress percent={60} />

更多用法请参考官方文档：https://ant.design/components/progress-cn/

对话框

对话框可以在页面中展示用户与系统之间的交互信息。Ant Design 提供了 Alert、Drawer、Popconfirm 等组件，可以实现对话框的功能。

import { Alert, Drawer, Popconfirm } from 'antd';

// Alert
<Alert message="This is an alert message" type="success" />

// Drawer
<Drawer title="Example Drawer" visible={visible} onClose={onClose}>
  <p>Some contents...</p>
</Drawer>

// Popconfirm
<Popconfirm title="Are you sure to delete?" onConfirm={confirm} onCancel={cancel}>
  <Button>Delete</Button>
</Popconfirm>

更多用法请参考官方文档：https://ant.design/components/alert-cn/、https://ant.design/components/drawer-cn/、https://ant.design/components/popconfirm-cn/

以上是 Ant Design 提供的一些反馈组件，让我们能够更加友好地与用户进行交互。在实际开发中，可以根据业务需求选择适合的组件使用。