写出一个react消息提醒弹框

当在 React 中需要实现消息提醒弹框时，你可以使用 React 的 useState 钩子来管理弹框的显示与隐藏状态。下面是一个简单的示例：

import React, { useState } from 'react';

function MessageAlert() {
  const [showAlert, setShowAlert] = useState(false);

  const handleShowAlert = () => {
    setShowAlert(true);
    setTimeout(() => {
      setShowAlert(false);
    }, 3000); // 设置弹框显示时间，这里是3秒
  };

  return (
    <div>
      <button onClick={handleShowAlert}>显示消息提醒</button>
      {showAlert && (
        <div className="alert">
          <p>这是一条消息提醒！</p>
        </div>
      )}
    </div>
  );
}

export default MessageAlert;

上述代码中，我们首先使用 useState 钩子创建了一个名为 showAlert 的状态变量和一个名为 setShowAlert 的状态更新函数。初始状态为 false，表示弹框默认不显示。

当点击按钮时，调用 handleShowAlert 函数，该函数将 showAlert 状态更新为 true，从而显示弹框，并使用 setTimeout 函数设置了一个定时器，3秒后将 showAlert 状态更新为 false，从而隐藏弹框。

在 JSX 中，根据 showAlert 的值来判断是否渲染弹框的内容。当 showAlert 为 true 时，渲染包含消息内容的 div，从而显示弹框。

你可以根据需要对弹框的样式和内容进行自定义。