React中如何实现鼠标移入li添加可交互子元素、移出移除的功能

架构老林

2026-9-26

实现方案

核心思路

每个<li>单独维护hover状态，避免多个列表项状态互相干扰
使用onMouseEnter/onMouseLeave事件绑定，这两个事件仅在进出绑定元素本身时触发，不会因移入新增子元素误触发移除逻辑，保证子元素可正常交互
采用React声明式的条件渲染逻辑实现子元素的新增/移除，不需要手动操作DOM

完整代码示例

import { useState } from 'react';

// 封装独立的列表项组件，每个组件内部维护自己的hover状态
const ListItem = ({ children }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <li
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      // 以下为可选基础样式，可根据业务需求自行调整
      style={{ padding: '12px', border: '1px solid #e5e7eb', marginBottom: '8px' }}
    >
      {/* 渲染原有内容 */}
      {children}
      {/* hover状态下渲染新增子元素 */}
      {isHovered && (
        <div className="hover-extra-content" style={{ marginTop: '8px' }}>
          <img src="..." alt="详情配图" />
          <p>details of header</p>
          <button onClick={() => console.log('收藏按钮触发')}>add to favorite</button>
        </div>
      )}
    </li>
  );
};

// 父组件使用示例
const NewsList = () => {
  return (
    <ul style={{ listStyle: 'none', padding: '0 20px', maxWidth: '600px' }}>
      <ListItem>
        <a href="###">Pakistan cricket won the match</a>
      </ListItem>
      <ListItem>
        <a href="###">We should exercise every day</a>
      </ListItem>
    </ul>
  );
};

export default NewsList;