react如何重写alert
React 重写 alert 的方法
在 React 中，直接使用原生 alert 会破坏用户体验的一致性。可以通过自定义模态框或使用第三方库替代原生 alert。
使用自定义模态组件
创建一个可复用的 Alert 组件，通过状态控制显示与隐藏：
import { useState } from 'react';
function Alert({ message, onClose }) {
return (
<div style={{
position: 'fixed',
top: '20%',
left: '50%',
transform: 'translateX(-50%)',
padding: '20px',
background: 'white',
border: '1px solid #ccc',
borderRadius: '4px',
boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
zIndex: 1000
}}>
<p>{message}</p>
<button onClick={onClose}>OK</button>
</div>
);
}
function App() {
const [showAlert, setShowAlert] = useState(false);
const [alertMessage, setAlertMessage] = useState('');
const showCustomAlert = (message) => {
setAlertMessage(message);
setShowAlert(true);
};
return (
<div>
<button onClick={() => showCustomAlert('This is a custom alert!')}>
Show Alert
</button>
{showAlert && (
<Alert
message={alertMessage}
onClose={() => setShowAlert(false)}
/>
)}
</div>
);
}使用第三方库
安装流行的模态库如 react-toastify 或 sweetalert2：
npm install sweetalert2使用 sweetalert2 示例：
import Swal from 'sweetalert2';
function App() {
const showSweetAlert = () => {
Swal.fire({
title: 'Custom Alert',
text: 'This replaces the native alert',
icon: 'info',
confirmButtonText: 'OK'
});
};
return (
<button onClick={showSweetAlert}>
Show SweetAlert
</button>
);
}全局替换原生 alert
如需全局替换，可在入口文件重写 window.alert：
// index.js 或入口文件
window.originalAlert = window.alert;
window.alert = (msg) => {
// 使用自定义逻辑或第三方库
Swal.fire(msg);
};注意：全局替换可能影响依赖原生 alert 的第三方库，需谨慎使用。
