处理React中映射数组上的鼠标悬停事件

import React, { Component } from 'react';

class HoverableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hoveredIndex: null
    };
  }

  handleMouseEnter(index) {
    this.setState({ hoveredIndex: index });
  }

  handleMouseLeave() {
    this.setState({ hoveredIndex: null });
  }

  render() {
    const { data } = this.props;
    const { hoveredIndex } = this.state;

    return (
      <ul>
        {data.map((item, index) => (
          <li
            key={index}
            onMouseEnter={() => this.handleMouseEnter(index)}
            onMouseLeave={() => this.handleMouseLeave()}
            className={index === hoveredIndex ? 'hovered' : ''}
          >
            {item}
          </li>
        ))}
      </ul>
    );
  }
}

export default HoverableList;