{message}
);
};
export default Toast;
```
注意，上面的代码中，我们使用了`useRef`来引用DOM元素，并设置了一个定时器来在指定时间后隐藏Toast。同时，我们使用了CSS内联样式来定义Toast的外观，并根据`type`属性来应用不同的背景色。
### 第三步：创建Toast容器组件
由于我们可能需要在应用的多个地方显示Toast，并且希望Toast能够堆叠显示（例如，前一个Toast还没消失时，可以显示新的Toast），因此我们需要一个容器组件来管理这些Toast。
```jsx
// ToastContainer.js
import React, { useState } from 'react';
import Toast from './Toast';
const ToastContainer = ({ toasts }) => {
return (
{toasts.map((toast, index) => (
);
};
export default ToastContainer;
```
注意，这里的`ToastContainer`组件接收一个`toasts`数组作为属性，每个元素都是一个包含`message`、`type`和`duration`的对象。然后，我们使用`map`函数遍历这个数组，并为每个Toast生成一个`Toast`组件实例。
### 第四步：在应用的顶层管理Toast
现在，我们需要在应用的顶层（例如，在App组件中）管理Toast的显示和隐藏。这通常涉及到维护一个状态来存储当前的Toast列表，并提供一个函数来添加新的Toast到这个列表中。
```jsx
// App.js
import React, { useState } from 'react';
import ToastContainer from './ToastContainer';
const App = () => {
const [toasts, setToasts] = useState([]);
const addToast = (message, type, duration = 3000) => {
setToasts(prevToasts => [
...prevToasts,
{ message, type, duration }
]);
// 清理旧的Toast
setTimeout(() => {
setToasts(prevToasts => prevToasts.filter((_, index) => index !== prevToasts.length - 1));
}, duration + 500); // 等待Toast淡出后再从数组中移除
};
return (
{/* 应用的其他部分 */}
);
};
export default App;
```
在上面的代码中，我们定义了一个`addToast`函数来向`toasts`状态中添加新的Toast对象。同时，我们使用了一个`setTimeout`来在Toast自动消失后（包括淡出时间）从`toasts`数组中移除它。
### 第五步：优化与扩展
#### 1. 样式优化
- 你可以将内联样式移至CSS文件中，使用CSS类或CSS模块来提高样式的可维护性和复用性。
- 添加动画效果，如使用CSS的`transition`或`@keyframes`来增强用户体验。
#### 2. 功能扩展
- 支持Toast的堆叠顺序（例如，新的Toast出现在旧Toast的上方）。
- 提供配置选项来自定义Toast的位置、动画等。
- 实现Toast的关闭按钮，允许用户手动关闭Toast。
#### 3. 封装为库
- 将Toast组件及其相关逻辑封装成一个独立的React库，便于在多个项目中复用。
- 提供API文档和示例代码，帮助其他开发者快速上手。
### 结语
通过上面的步骤，我们成功地构建了一个基本的React Toast通知组件，并展示了如何在应用中集成和使用它。这个组件虽然简单，但已经具备了Toast通知所需的基本功能。你可以根据自己的需求进一步扩展和优化这个组件，使其更加符合你的应用风格和用户体验要求。在码小课网站上，你可以分享这个组件的实现过程和心得，与其他开发者交流学习，共同进步。