React Strap Alert警告框无法单独关闭问题

这个问题很好解决，核心原因是你现在所有Alert都共用了同一个show状态变量，所以点击任意关闭按钮都会把这个共享状态改成false，导致所有弹窗一起消失。我给你两种解决方案，你可以根据需求选择：

方案一：为每个Alert单独设置状态 #

如果你的Alert数量不多，直接给每个Alert声明独立的状态变量是最简单的方式：

首先修改状态声明和组件绑定：

import { useState } from 'react';
import Alert from 'react-bootstrap/Alert';

function App() {
  // 为每个Alert单独创建状态
  const [showDangerAlert, setShowDangerAlert] = useState(true);
  const [showInfoAlert1, setShowInfoAlert1] = useState(true);
  const [showInfoAlert2, setShowInfoAlert2] = useState(true);

  return (
    <div className="p-4">
      <Alert 
        variant="danger" 
        show={showDangerAlert} 
        dismissible 
        onClose={() => setShowDangerAlert(false)} 
      >
        <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
        <p>Duis mollis, est non commodo</p>
      </Alert>

      <Alert 
        variant="info" 
        show={showInfoAlert1} 
        dismissible 
        onClose={() => setShowInfoAlert1(false)} 
      >
        <Alert.Heading>Oh snap! You got an Alert Message!</Alert.Heading>
        <p>Duis mollis, est non commodo</p>
      </Alert>

      <Alert 
        variant="info" 
        show={showInfoAlert2} 
        dismissible 
        onClose={() => setShowInfoAlert2(false)} 
      >
        <Alert.Heading>Oh snap! You got an Alert Message !</Alert.Heading>
        <p>Duis mollis, est non commodo</p>
      </Alert>
    </div>
  );
}

export default App;

每个Alert现在绑定自己的show状态和对应的更新函数，点击关闭按钮只会修改当前Alert的状态，不会影响其他弹窗。

方案二：用数组管理多个Alert状态（推荐用于Alert数量多的场景） #

如果以后可能需要添加更多Alert，用数组来统一管理所有Alert的配置和显示状态会更灵活：

import { useState } from 'react';
import Alert from 'react-bootstrap/Alert';

function App() {
  // 用数组存储所有Alert的配置和显示状态
  const [alerts, setAlerts] = useState([
    {
      id: 1,
      variant: "danger",
      heading: "Oh snap! You got an error!",
      content: "Duis mollis, est non commodo",
      show: true
    },
    {
      id: 2,
      variant: "info",
      heading: "Oh snap! You got an Alert Message!",
      content: "Duis mollis, est non commodo",
      show: true
    },
    {
      id: 3,
      variant: "info",
      heading: "Oh snap! You got an Alert Message !",
      content: "Duis mollis, est non commodo",
      show: true
    }
  ]);

  // 根据Alert的id关闭对应弹窗
  const handleCloseAlert = (alertId) => {
    setAlerts(prevAlerts => 
      prevAlerts.map(alert => 
        // 只更新目标Alert的show状态
        alert.id === alertId ? {...alert, show: false} : alert
      )
    );
  };

  return (
    <div className="p-4">
      {/* 遍历数组渲染所有Alert */}
      {alerts.map(alert => (
        <Alert 
          key={alert.id}
          variant={alert.variant} 
          show={alert.show} 
          dismissible 
          onClose={() => handleCloseAlert(alert.id)} 
        >
          <Alert.Heading>{alert.heading}</Alert.Heading>
          <p>{alert.content}</p>
        </Alert>
      ))}
    </div>
  );
}

export default App;

这种方式的好处是，以后要新增Alert只需要在数组里添加一条配置即可，不需要额外声明状态变量，代码更易维护。

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