React实现列表新增项几秒绿色高亮闪烁的方法

先纠正你代码里的几个问题：

• div元素不支持onChange事件，该事件仅适用于表单控件（如input、select等）
• 直接操作DOM样式不符合React状态驱动的设计理念，应该通过状态控制类名实现样式变化
• 按钮的onClick绑定了未定义的handleClick，实际应该调用addItem

核心实现思路 #

通过状态跟踪最新添加的项ID，结合CSS动画给目标项添加动画类，一段时间后自动移除状态，完成闪烁效果。

完整实现代码 #

1. CSS动画定义（可放在单独CSS文件或组件内联样式）

@keyframes flashGreen {
  0% { background-color: rgba(0, 255, 0, 0.4); }
  50% { background-color: rgba(0, 255, 0, 0.1); }
  100% { background-color: transparent; }
}

.flash-item {
  animation: flashGreen 1s ease-in-out 3; /* 闪烁3次，每次1秒 */
}

2. React组件代码

import { useState } from 'react';

const mockdata = [
  {id: 1, title: 'one'},
  {id: 2, title: 'two'},
  {id: 3, title: 'three'},
  {id: 4, title: 'four'},
  {id: 5, title: 'five'}
]

export default function List() {
  const [data, setData] = useState(mockdata);
  // 新增状态：存储最新添加项的ID
  const [newItemId, setNewItemId] = useState(null);

  const addItem = () => {
    // 用时间戳生成唯一ID，避免重复
    const newId = Date.now();
    const newValue = {id: newId, title: `item-${newId}`};
    setData(prev => [...prev, newValue]);
    
    // 标记最新项
    setNewItemId(newId);
    // 3秒后取消标记，停止闪烁
    setTimeout(() => setNewItemId(null), 3000);
  }

  return (
    <>
      {data.map((item) => (
        <div 
          key={item.id}
          // 判断是否为最新项，添加动画类
          className={item.id === newItemId ? 'flash-item' : ''}
        >
          {item.title}
        </div>
      ))}
      <button onClick={addItem}>
        Add Item
      </button>
    </>
  )
}

补充说明 #

• 用Date.now()生成ID是为了避免多次点击添加重复ID的问题，比固定ID更合理
• 动画参数可按需调整：比如改成animation: flashGreen 0.5s forwards，表示0.5秒内完成一次渐变并保持最终透明状态
• 这种方式完全遵循React状态驱动模式，无需直接操作DOM，更符合组件设计规范

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