React实现满足三条件的限时错误提示功能求助

可以用 React 的 useEffect 和 useState 钩子实现这个需求，以下是具体的组件代码：

import { useState, useEffect } from 'react';

const ErrorAlert = ({ message }) => {
  const [showAlert, setShowAlert] = useState(false);

  useEffect(() => {
    // 当 message 不为空时显示提示
    if (message) {
      setShowAlert(true);
      // 5秒后自动隐藏提示
      const timer = setTimeout(() => {
        setShowAlert(false);
      }, 5000);

      // 清除定时器，避免组件卸载后内存泄漏
      return () => clearTimeout(timer);
    } else {
      // message 为空时直接隐藏提示
      setShowAlert(false);
    }
  }, [message]); // 依赖 message，每次变化触发对应逻辑

  // 不满足显示条件时返回 null，不渲染组件
  if (!showAlert) return null;

  return (
    <div style={{ padding: '12px', background: '#ffebee', color: '#c62828', borderRadius: '4px' }}>
      {message}
    </div>
  );
};

export default ErrorAlert;

核心逻辑说明： #

• 满足条件1：当 message 为空时，useEffect 会把 showAlert 设为 false，组件直接返回 null，不会渲染任何提示内容。
• 满足条件2：message 有值时，先将 showAlert 设为 true 显示提示，同时启动5秒定时器，时间到后自动将 showAlert 改为 false 隐藏提示。
• 满足条件3：useEffect 的依赖数组包含 message，每次 message 变化时都会重新执行副作用函数，触发对应的显示/隐藏逻辑。

使用示例： #

在父组件中传入错误信息即可：

<ErrorAlert message={yourErrorMessage} />

你可以替换 style 中的内联样式，或者通过 CSS 类给提示框添加更符合项目风格的样式。

内容的提问来源于stack exchange，提问作者Stesy