如何在react/css中隐藏警报

import React, { useState } from 'react';

const MyComponent = () => {
  const [showAlert, setShowAlert] = useState(true);

  return (
    <div>
      {showAlert && <div className="alert">This is an alert message.</div>}
      {/* 其他组件内容 */}
    </div>
  );
};

export default MyComponent;

.alert {
  /* 警报的样式设置 */
}

.hide {
  display: none;
}

const MyComponent = () => {
  const [showAlert, setShowAlert] = useState(true);

  const hideAlert = () => {
    setShowAlert(false);
  };

  return (
    <div>
      {showAlert && <div className={`alert ${showAlert ? '' : 'hide'}`}>This is an alert message.</div>}
      {/* 其他组件内容 */}
      <button onClick={hideAlert}>Hide Alert</button>
    </div>
  );
};