根据React中的响应显示/隐藏成功或危险警报

import React, { useState } from 'react';

function Alert(props) {
  const { type, message } = props;

  return (
    <div className={`alert ${type}`}>
      {message}
    </div>
  );
}

function App() {
  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
  const [showDangerAlert, setShowDangerAlert] = useState(false);

  const handleShowAlert = (type) => {
    if (type === 'success') {
      setShowSuccessAlert(true);
      setShowDangerAlert(false);
    } else if (type === 'danger') {
      setShowSuccessAlert(false);
      setShowDangerAlert(true);
    }
  };

  return (
    <div>
      <button onClick={() => handleShowAlert('success')}>显示成功警报</button>
      <button onClick={() => handleShowAlert('danger')}>显示危险警报</button>

      {showSuccessAlert && <Alert type="success" message="操作成功！" />}
      {showDangerAlert && <Alert type="danger" message="操作存在风险！" />}
    </div>
  );
}

export default App;