React中结合map函数实现单个元素悬停条件渲染的方法

我懂你想通过React状态来练习条件渲染的思路，现在的问题出在你用了一个全局的布尔状态isHover——所有5个区块都共享这个状态，所以只要有一个区块触发hover事件，所有区块都会同时变粗。

要实现单个区块独立的hover效果，我们只需要把状态从布尔值改成记录当前hover区块的唯一ID，这样就能精准定位到具体的区块了。下面是修改后的完整代码：

import "./styles.css";
import styled from "styled-components";
import { useState } from "react";

export default function App() {
  const array = [
    { id: "1", title: "ABC" },
    { id: "2", title: "DEF" },
    { id: "3", title: "GHI" },
    { id: "4", title: "JKL" },
    { id: "5", title: "MNO" }
  ];

  // 把状态改成存储当前hover的区块ID，初始值为null表示没有区块被hover
  const [hoveredId, setHoveredId] = useState(null);

  // 单独提取标题的styled组件，方便接收hover状态
  const StyledTitle = styled.div`
    border: 1px solid red;
    padding: 5px 10px;
    font-weight: ${(props) => (props.isHover ? "700" : "400")};
  `;

  return (
    <Head>
      <div className="header">
        {array.map((content) => {
          return (
            <StyledTitle
              key={content.id} // 别忘了加key属性，React列表渲染必须有
              onMouseEnter={() => {
                // 鼠标进入时，记录当前区块的ID
                setHoveredId(content.id);
              }}
              onMouseLeave={() => {
                // 鼠标离开时，重置为null
                setHoveredId(null);
              }}
              // 判断当前区块的ID是否等于状态中存储的hoveredId，来决定是否加粗
              isHover={hoveredId === content.id}
            >
              {content.title}
            </StyledTitle>
          );
        })}
      </div>
    </Head>
  );
}

const Head = styled.div`
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  .header {
    display: inline-flex;
    border: 1px solid black;
    box-sizing: border-box;
  }
`;

核心修改点说明： #

• 状态变更：将isHover（布尔值）改为hoveredId（存储区块ID），这样我们能精准知道哪个区块正在被hover。
• 独立样式控制：把每个标题提取成StyledTitle组件，通过isHover属性传递当前区块的hover状态，实现单个区块的样式独立变化。
• 事件绑定：每个区块的onMouseEnter和onMouseLeave只更新当前区块的ID到状态中，不会影响其他区块。

这样修改后，鼠标悬停在任意一个区块上时，只有该区块的文字会变粗，完美实现你想要的效果，同时也练习了React状态结合列表渲染的条件控制逻辑。

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