react 全局信息弹框

React 中的全局信息弹框通常是指在整个应用范围内都需要显示的信息提示、警告或者是错误通知等，这类弹框在用户界面设计中常用于及时反馈系统状态、引导用户操作或是处理特殊情况。

### 实现方式：

#### 1. 使用第三方库

在React项目中引入一些流行的UI组件库如`antd`、`Material UI` 或 `react-bootstrap` 来创建全局信息弹框。例如，使用`antd`的`Message`组件可以轻松实现这样的功能。

import React from 'react';
import { message } from 'antd';

function displayGlobalAlert() {
  message.success('这是一个全局成功的消息提示');
}

// 调用此函数展示全局消息
displayGlobalAlert();

#### 2. 自定义全局弹窗组件

对于更定制化的需求，可以在React中自定义一个全局弹窗组件。这个组件可以根据需要动态渲染，并且通过props传递消息内容、类型（如成功、失败、警告）、是否关闭按钮等属性。

import React, { useState } from 'react';
import styled from 'styled-components';

const AlertWrapper = styled.div`
  /* 根据需求添加样式 */
`;

function GlobalAlert({ type, content }) {
  const [isShown, setIsShown] = useState(true);

  return (
    <AlertWrapper>
      {/* 根据type渲染不同的样式 */}
      {isShown && <div>{content}</div>}
      {/* 提供关闭按钮或其他交互元素 */}
      <button onClick={() => setIsShown(false)}>Close</button>
    </AlertWrapper>
  );
}

// 使用示例
<GlobalAlert type="success" content="您已成功登录！" />;

#### 监听事件触发全局弹窗

在特定事件触发时（比如网络请求完成、数据加载结束、错误发生等），调用上述自定义的`GlobalAlert`组件或第三方库提供的API来展示弹窗。这通常涉及事件监听、响应逻辑和条件判断。

###