在React js中更改悬停时的单个锚点链接的颜色

import React, { Component } from 'react';

class HoverLink extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isHovered: false,
    };
  }

  handleMouseEnter = () => {
    this.setState({ isHovered: true });
  }

  handleMouseLeave = () => {
    this.setState({ isHovered: false });
  }

  render() {
    const { isHovered } = this.state;
    const linkStyle = {
      color: isHovered ? 'red' : 'black',
    };

    return (
      <div
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
      >
        <a href="#" style={linkStyle}>悬停链接</a>
      </div>
    );
  }
}

export default HoverLink;