如何实现悬停时仅高亮当前组件，避免共用状态的其他组件同步变更样式

方案1：用CSS原生:hover实现（优先推荐） #

不需要维护React状态，性能最高，只要给元素加通用类名，在CSS中定义悬停样式即可：

<div style={{ background: '#fff' }}>
  <div className="tool-item" style={baseStyle}>
    <FontAwesomeIcon icon={faMousePointer} style={{ fontSize: "20px" }} />
  </div>
  <div className="tool-item" style={baseStyle}>
    <FontAwesomeIcon icon={faMousePointer} style={{ fontSize: "20px" }} />
  </div>
</div>

对应CSS代码：

/* 将你之前highlight对象里的样式写在这里即可 */
.tool-item:hover {
  border: 1px solid #1677ff;
  background: #e6f4ff;
}

除非你需要在高亮的同时触发其他JS业务逻辑，否则首选这个方案。

方案2：状态存储当前激活元素标识 #

如果需要用JS控制高亮逻辑，可以把原有的样式状态改为存储当前悬停元素的唯一标识（索引/ID）：

import { useState } from 'react'

// 状态默认值为null，表示无元素悬停
const [activeIndex, setActiveIndex] = useState(null)
// 样式常量直接定义在组件外即可，无需存入状态
const baseStyle = {/* 你的基础样式配置 */}
const highlight = {/* 你的高亮样式配置 */}

return (
  <div style={{ background: '#fff' }}>
    {/* 第一个元素绑定索引0 */}
    <div
      onMouseEnter={() => setActiveIndex(0)}
      onMouseLeave={() => setActiveIndex(null)}
      style={{...baseStyle, ...(activeIndex === 0 ? highlight : {})}}
    >
      <FontAwesomeIcon icon={faMousePointer} style={{ fontSize: "20px" }} />
    </div>
    {/* 第二个元素绑定索引1 */}
    <div
      onMouseEnter={() => setActiveIndex(1)}
      onMouseLeave={() => setActiveIndex(null)}
      style={{...baseStyle, ...(activeIndex === 1 ? highlight : {})}}
    >
      <FontAwesomeIcon icon={faMousePointer} style={{ fontSize: "20px" }} />
    </div>
  </div>
)

如果你的元素是通过数组循环渲染的，直接用循环的index作为标识即可，无需手动写死。

方案3：抽离为独立子组件，各自维护状态 #

如果后续工具项还有其他独立业务逻辑，抽成子组件复用性更高，每个组件自己管理自己的悬停状态，互不干扰：

import { useState } from 'react'

// 独立子组件
const ToolItem = () => {
  const [isHover, setIsHover] = useState(false)
  const baseStyle = {/* 基础样式配置 */}
  const highlight = {/* 高亮样式配置 */}
  return (
    <div
      onMouseEnter={() => setIsHover(true)}
      onMouseLeave={() => setIsHover(false)}
      style={{...baseStyle, ...(isHover ? highlight : {})}}
    >
      <FontAwesomeIcon icon={faMousePointer} style={{ fontSize: "20px" }} />
    </div>
  )
}

// 父组件直接调用即可
const Parent = () => {
  return (
    <div style={{ background: '#fff' }}>
      <ToolItem />
      <ToolItem />
    </div>
  )
}

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