替换原生window.alert为Material UI的Alert组件后无法显示怎么办？

我完成应用开发后正在优化界面，打算将所有window.alert替换为MUI的Alert组件（样式更美观），但替换后Alert组件无法正常弹出显示，不知道是什么原因。

举个例子，原先使用原生alert的代码如下，密码不匹配时可以正常弹出提示：

const register = (e) => {        
  if(password !== confirmsPassword){            
    alert("Las contraseñas no coinciden");        
  }        
  else if(password.length < 6){            
    alert("Su contraseña debe tener al menos 6 caracteres");        
  }        
  else{          
    // 提交数据到firebase的业务逻辑
  }            
}

运行效果如下图所示：

但我替换为MUI的Alert组件后，代码如下，触发条件时没有任何提示弹出：

const register = (e) => {        
  if(password !== confirmsPassword){            
    <Alert severity="error">Las contraseñas no coinciden</Alert>        
  }        
  else if(password.length < 6){            
    <Alert severity="error">Su contraseña debe tener al menos 6 caracteres</Alert>        
  }        
  else{              
    // 提交数据到firebase的业务逻辑
  }            
}

完全没有消息、提示等任何反馈。

你的写法不符合React组件的渲染规则，核心问题如下：

• 原生window.alert是浏览器内置的全局API，调用后会直接触发系统级弹窗，不需要依赖React的渲染逻辑
• MUI的Alert是普通React组件，必须被包含在组件的返回JSX结构里、挂载到DOM树中才会被渲染，你直接在register事件回调里写<Alert>标签，这段JSX没有进入React的渲染流程，自然不会显示。

MUI的Alert组件通常配合Snackbar组件实现自动弹出的消息提示效果，完整实现步骤如下：

步骤1：引入依赖和定义状态 #

首先在你的组件文件头部引入需要的组件和Hook：

import { useState } from 'react';
import { Snackbar, Alert } from '@mui/material';

然后在组件内部定义控制提示的状态：

// 控制提示框是否显示
const [alertOpen, setAlertOpen] = useState(false);
// 提示文本内容
const [alertMsg, setAlertMsg] = useState('');
// 提示类型：error/warning/info/success
const [alertSeverity, setAlertSeverity] = useState('error');

步骤2：修改register事件处理逻辑 #

把原来直接写<Alert>的逻辑替换成修改状态的代码：

const register = (e) => {
  e.preventDefault();
  if(password !== confirmsPassword){
    setAlertMsg("两次输入的密码不匹配");
    setAlertSeverity("error");
    setAlertOpen(true);
  } else if(password.length < 6){
    setAlertMsg("密码长度不能少于6位");
    setAlertSeverity("error");
    setAlertOpen(true);
  } else{
    // 原有提交到firebase的逻辑
  }
}

步骤3：在组件返回的JSX中挂载Snackbar和Alert组件 #

添加提示关闭的处理函数，然后把组件放到JSX结构中：

// 关闭提示的回调
const handleAlertClose = (event, reason) => {
  if (reason === 'clickaway') return;
  setAlertOpen(false);
};

// 组件return部分要加入以下代码
return (
  <div>
    {/* 原有页面的其他JSX内容 */}
    <Snackbar 
      open={alertOpen} 
      autoHideDuration={3000} 
      onClose={handleAlertClose}
      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
    >
      <Alert onClose={handleAlertClose} severity={alertSeverity} sx={{ width: '100%' }}>
        {alertMsg}
      </Alert>
    </Snackbar>
  </div>
)

这样触发校验条件时，就会自动弹出带MUI样式的提示框，3秒后会自动关闭。

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