React中如何在onClick等回调事件中渲染全新组件（支持多实例）

要实现每次点击都新增一个独立的提示组件，核心思路是用数组状态管理所有需要显示的提示实例：每次点击按钮就往数组里添加一条新的提示数据，再遍历数组渲染对应的提示组件。以下是完整实现方案：

1. 主组件（Demo）修改 #

用useState维护一个存储提示实例的数组，点击按钮时添加新提示，同时提供移除提示的方法：

import { useState } from 'react';
import Toaster from './Toaster';

export default function Demo() {
  const [toasters, setToasters] = useState([]);

  function handleClick() {
    // 生成唯一ID避免渲染冲突，也可以用uuid库替代Date.now()
    const newToaster = {
      id: Date.now(),
      message: 'sent'
    };
    // 基于当前状态新增提示，避免状态覆盖
    setToasters(prev => [...prev, newToaster]);
  }

  // 根据ID移除指定提示
  function removeToaster(id) {
    setToasters(prev => prev.filter(toaster => toaster.id !== id));
  }

  return (
    <div>
      <button onClick={handleClick}>Click to update</button>
      {/* 统一存放提示的容器 */}
      <div className="toaster-container">
        {toasters.map(toaster => (
          <Toaster 
            key={toaster.id} 
            message={toaster.message} 
            onClose={() => removeToaster(toaster.id)} 
          />
        ))}
      </div>
    </div>
  );
}

2. 独立提示组件（Toaster） #

封装可复用的提示组件，支持自动关闭和手动关闭：

import { useEffect } from 'react';

export default function Toaster({ message, onClose }) {
  // 3秒后自动关闭提示
  useEffect(() => {
    const timer = setTimeout(onClose, 3000);
    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    <div className="toaster">
      <span>{message}</span>
      <button onClick={onClose} className="toaster-close">×</button>
    </div>
  );
}

3. 基础样式（可选） #

给提示组件加些样式，让它们合理排列在页面角落：

.toaster-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.toaster {
  background: #2ecc71;
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 220px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.toaster-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  margin-left: 10px;
}

关键逻辑说明 #

• 每个提示实例用唯一ID做key，确保React能正确识别和渲染组件。
• 用函数式更新状态setToasters(prev => [...prev, newToaster])，保证基于最新的数组添加新元素。
• 自动关闭逻辑通过useEffect实现，同时清理定时器避免内存泄漏。
• 支持手动关闭，提升用户交互体验。

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