React Hooks实现map渲染列表时鼠标悬停单行切换指定图标

核心思路是用单独的状态存储当前悬停的行索引，只控制匹配索引的行内容渲染，不会触发全列表状态同步变更：

实现步骤 #

• 新增hoveredRowIndex状态，记录当前鼠标悬停的行索引，默认值为null代表无悬停行
• 给tr绑定onMouseEnter事件，触发时将当前行的index存入状态；绑定onMouseLeave事件，触发时清空状态
• 渲染序号列内容时做条件判断：当前行索引等于hoveredRowIndex则显示播放图标，否则显示序号
• 注意原代码中useEffect依赖的valueList未定义，若接口只需要页面加载时请求一次，可将依赖改为空数组

完整可运行代码 #

import React, { useState, useEffect } from "react";
import axios from "axios";
import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline";
// 若后续需要暂停逻辑可保留PauseCircleOutlineIcon，此处先按当前需求实现

const List = () => {
  const [dataList, setDataList] = useState([]);
  // 新增状态存储当前悬停的行索引
  const [hoveredRowIndex, setHoveredRowIndex] = useState(null);

  const chartURL = `https://api.deezer.com/chart/0/tracks?&limit=10`;

  useEffect(() => {
    axios.get(chartURL).then((res) => {
      setDataList(res.data.data);
    });
  // 原依赖的valueList未定义，此处改为空数组保证只在组件挂载时请求一次
  }, []);

  return (
    <div>
      <table>
        <tbody>
          {dataList.map((item, index) => {
            return (
              <tr 
                key={index}
                // 鼠标进入时存储当前行索引
                onMouseEnter={() => setHoveredRowIndex(index)}
                // 鼠标离开时清空状态
                onMouseLeave={() => setHoveredRowIndex(null)}
              >
                <td>
                  {/* 条件判断显示内容 */}
                  {hoveredRowIndex === index ? <PlayCircleOutlineIcon /> : index + 1}
                </td>
                {/* 其他列内容可按需补充 */}
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  );
};

export default List;

扩展说明 #

如果你的列表数据有唯一id字段，更推荐用id代替index作为判断标识，避免列表排序/增删时出现索引错位导致的悬停显示异常。

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