ReactJS悬停切换联系方式组件优化方案求助

你的思路是对的，但确实可以通过简化状态管理和CSS规则来让代码更简洁易维护。下面是优化后的方案，不管是函数组件还是类组件版本，都能解决你说的冗余问题：

优化后的函数组件版本（推荐） #

import React, { useState } from "react";
import switchStyles from "./switch.module.scss";

const LinkSwitch = () => {
  // 用单个状态记录当前激活的类型：'email'/'phone'/null，替代原来的三个状态
  const [activeType, setActiveType] = useState(null);

  // 动态生成容器类名，根据激活状态添加对应类
  const containerClassName = `${switchStyles.hoverContainer} ${
    activeType ? switchStyles[`${activeType}Active`] : ""
  }`;

  return (
    <div className={containerClassName}>
      {/* 邮箱项：触发文字和显示内容放在同一个容器里 */}
      <div className={switchStyles.hoverItem}>
        <a
          className={switchStyles.hoverTrigger}
          onMouseEnter={() => setActiveType("email")}
          onMouseLeave={() => setActiveType(null)}
        >
          почта
        </a>
        <a
          className={switchStyles.hoverContent}
          href="mailto:info@adnosov.ru"
          onMouseEnter={() => setActiveType("email")}
          onMouseLeave={() => setActiveType(null)}
        >
          info@adnosov.ru
        </a>
      </div>

      {/* 分隔符单独提取，避免用伪元素带来的布局问题 */}
      <span className={switchStyles.separator}>/</span>

      {/* 电话项结构和邮箱一致，保持代码一致性 */}
      <div className={switchStyles.hoverItem}>
        <a
          className={switchStyles.hoverTrigger}
          onMouseEnter={() => setActiveType("phone")}
          onMouseLeave={() => setActiveType(null)}
        >
          телефон
        </a>
        <a
          className={switchStyles.hoverContent}
          href="tel:+79920201025"
          onMouseEnter={() => setActiveType("phone")}
          onMouseLeave={() => setActiveType(null)}
        >
          +7 992 020 1025
        </a>
      </div>
    </div>
  );
};

export default LinkSwitch;

配套优化后的SCSS代码 #

.hover-container {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 0 8px; /* 替代分隔符的margin，更灵活 */
}

.separator {
  font-weight: 500;
}

.hover-item {
  position: relative;
  /* 确保触发区域和显示内容的尺寸一致 */
  width: fit-content;
}

.hover-trigger,
.hover-content {
  display: block;
  white-space: nowrap;
}

.hover-content {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: opacity 0.2s ease; /* 添加过渡动画，提升交互体验 */
}

/* 根据父容器的激活状态，精准控制对应项的显示/隐藏 */
.email-active .hover-item:first-child .hover-content {
  opacity: 1;
  visibility: visible;
}
.email-active .hover-item:first-child .hover-trigger {
  opacity: 0;
}

.phone-active .hover-item:last-child .hover-content {
  opacity: 1;
  visibility: visible;
}
.phone-active .hover-item:last-child .hover-trigger {
  opacity: 0;
}

类组件简化版本（如果你偏好类组件） #

import React from "react";
import switchStyles from "./switch.module.scss";

class LinkSwitch extends React.Component {
  // 初始化单个状态，替代原来的三个状态
  state = { activeType: null };

  render() {
    const { activeType } = this.state;
    const containerClassName = `${switchStyles.hoverContainer} ${
      activeType ? switchStyles[`${activeType}Active`] : ""
    }`;

    return (
      <div className={containerClassName}>
        <div className={switchStyles.hoverItem}>
          <a
            className={switchStyles.hoverTrigger}
            onMouseEnter={() => this.setState({ activeType: "email" })}
            onMouseLeave={() => this.setState({ activeType: null })}
          >
            почта
          </a>
          <a
            className={switchStyles.hoverContent}
            href="mailto:info@adnosov.ru"
            onMouseEnter={() => this.setState({ activeType: "email" })}
            onMouseLeave={() => this.setState({ activeType: null })}
          >
            info@adnosov.ru
          </a>
        </div>

        <span className={switchStyles.separator}>/</span>

        <div className={switchStyles.hoverItem}>
          <a
            className={switchStyles.hoverTrigger}
            onMouseEnter={() => this.setState({ activeType: "phone" })}
            onMouseLeave={() => this.setState({ activeType: null })}
          >
            телефон
          </a>
          <a
            className={switchStyles.hoverContent}
            href="tel:+79920201025"
            onMouseEnter={() => this.setState({ activeType: "phone" })}
            onMouseLeave={() => this.setState({ activeType: null })}
          >
            +7 992 020 1025
          </a>
        </div>
      </div>
    );
  }
}

export default LinkSwitch;

核心优化点说明 #

1. 状态精简：用activeType单个状态替代原来的三个状态，逻辑更清晰，避免状态不同步的问题。
2. 结构模块化：把每个可hover的项封装成.hover-item，代码结构一致，后续添加新项时可以直接复用结构。
3. CSS去冗余：使用通用类名替代原来的特定类，避免重复写相同的显示/隐藏规则；同时添加过渡动画，让交互更流畅。
4. 体验提升：给邮箱和电话链接添加mailto:/tel:协议，直接唤起对应应用；给显示内容也绑定hover事件，避免鼠标从触发文字移到内容时出现闪烁。

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