React中alert变量未使用警告及Alert组件不显示、关闭失效问题

一、解决ESLint「alert is assigned a value but never used」警告 #

问题根源：App组件中声明了alert状态变量，但渲染Alert组件时未传入该变量，而是硬编码了字符串"wtf"，导致ESLint判定变量未被使用。

修复方法：
修改App组件中Alert组件的调用代码，将硬编码字符串替换为状态变量：

// 原代码
<Alert alert="wtf"/>

// 修改后
<Alert alert={alert} />

二、修复Alert组件不显示消息与关闭按钮失效问题 #

1. 修复条件渲染语法错误 #

Alert组件中条件渲染缺少大括号包裹逻辑表达式，React无法正确解析条件判断。

修改Alert组件的返回内容：

// 原代码
props.alert && <div className="alert alert-warning alert-dismissible fade show" role="alert">...</div>

// 修改后
{props.alert && (
  <div className={`alert alert-${props.alert.type} alert-dismissible fade show`} role="alert">
    <strong>{props.alert.type}</strong> : {props.alert.msg}
    <button 
      type="button" 
      className="close" 
      onClick={() => props.onClose()}
      aria-label="Close"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
)}

2. 实现Alert关闭逻辑 #

原生Bootstrap的data-dismiss="alert"依赖其独立JS库，React项目中建议通过父组件状态控制显示/隐藏。

• 在App组件中添加关闭Alert的方法：

const hideAlert = () => {
  setAlert(null);
};

• 将该方法传递给Alert组件：

<Alert alert={alert} onClose={hideAlert} />

3. 优化Alert自动关闭（可选） #

为提升体验，可在调用showAlert后添加定时器自动关闭Alert：

const showAlert = (message, type) => {
  setAlert({ msg: message, type: type });
  // 3秒后自动关闭
  setTimeout(() => {
    setAlert(null);
  }, 3000);
};

4. 动态设置Alert样式类 #

根据Alert的type动态切换Bootstrap样式类，让样式贴合消息类型（如success对应alert-success）。

完整修复后代码 #

App组件 #

import { useState } from 'react';
import Navbar from './Navbar';
import Alert from './Alert';

function App(){
  const [mode, setMode] = useState('light');
  const [alert, setAlert] = useState(null);

  const showAlert = (message, type) => {
    setAlert({ msg: message, type: type });
    setTimeout(() => {
      setAlert(null);
    }, 3000);
  };

  const hideAlert = () => {
    setAlert(null);
  };

  const toggleMode = () => {
    if(mode === 'light'){
      setMode('dark');
      document.body.style.backgroundColor = '#56595b';
      showAlert("已启用暗黑模式", "success");
    } else {
      setMode('light');
      document.body.style.backgroundColor = 'white';
      showAlert("已启用浅色模式", "success");
    }
  };

  return(
    <>
      <Navbar title="Blog" mode={mode} toggleMode={toggleMode}/>
      <Alert alert={alert} onClose={hideAlert} />
    </>
  );
}

export default App;

Alert组件 #

import React from 'react';

export default function Alert(props) {
  return (
    <>
      {props.alert && (
        <div className={`alert alert-${props.alert.type} alert-dismissible fade show`} role="alert">
          <strong>{props.alert.type}</strong> : {props.alert.msg}
          <button 
            type="button" 
            className="close" 
            onClick={props.onClose}
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      )}
    </>
  );
}

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