React封装toast组件
时间: 2023-10-28 20:04:49 浏览: 53
以下是一个简单的React封装toast组件的示例:
```jsx
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import './toast.css';
const Toast = ({ message, duration = 3000, onClose }) => {
const [visible, setVisible] = useState(false);
useEffect(() => {
setVisible(true);
const timer = setTimeout(() => {
setVisible(false);
onClose && onClose();
}, duration);
return () => clearTimeout(timer);
}, [duration, onClose]);
return visible ? (
<div className="toast">
<div className="toast-message">{message}</div>
</div>
) : null;
};
const showToast = (message, duration = 3000, onClose) => {
const div = document.createElement('div');
document.body.appendChild(div);
ReactDOM.render(
<Toast message={message} duration={duration} onClose={() => {
ReactDOM.unmountComponentAtNode(div);
onClose && onClose();
}} />,
div
);
};
export default showToast;
```
这个组件包含一个`Toast`组件和一个`showToast`函数。`Toast`组件接收`message`、`duration`和`onClose`作为属性,其中`message`表示要显示的消息,`duration`表示消息显示的时间(默认为3秒),`onClose`表示关闭消息时的回调函数。
`showToast`函数用于在页面上创建一个`Toast`组件并显示消息。它接收与`Toast`组件相同的属性,还有一个可选的`onClose`回调函数,用于在消息关闭时执行其他操作。
在使用时,可以像这样调用`showToast`函数:
```jsx
import React from 'react';
import showToast from './toast';
const MyComponent = () => {
const handleClick = () => {
showToast('Hello, world!', 2000, () => console.log('Toast closed.'));
};
return (
<button onClick={handleClick}>Show Toast</button>
);
};
export default MyComponent;
```
这个示例在点击按钮时显示一个消息框,显示2秒后关闭,并在关闭时输出一条消息到控制台。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)