Javascript 一次只针对一个div，悬停的div，而不是ReactJS中的另一个同级div？

我有一个独特的场景，但我无法理解这一点

当我将鼠标悬停在一个DIV上时，它会选择两个兄弟DIV。 我不要这种行为

我只想选择正在悬停的DIV

如何在ReactJS中实现这一点？。 工作代码如下所示

App.js

---

应用程序中的悬停状态对两个div都是通用的。要让它工作，你需要 为每个div分别设置悬停状态。为此，请创建一个新组件TextDiv

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数TextDiv（{t}）{
const[hover，setHover]=useState（false）；
让cclass=hover？“item itemHover”：“item”；
返回(
setHover（真）}
onMouseLeave={（）=>setHover（false）}>
{t}
)
}

并更改App.js文件

import React，{useState}来自“React”；
从“/TextDiv”导入TextDiv
导入“/styles.css”；
导出默认函数App（）{
常量文本=[“Arjun”，“Andy”]；
返回(
{
text.map（（t，i）=>(
))
}
)
}

你能用CSS做吗？使用CSS非常简单。只需添加以下内容：

.item:hover{
  background: grey;
}

---

将

setHover

与

i

一起使用，i是每个

div

的唯一索引，将

let-cclass

移动到

map

中，并将其更改为

let-cclass=hover==i？“项目悬停”：“项目”最好制作3个单独的组件，每个组件都有自己的
悬停状态，而不是一次将所有3个组件绑定到同一个单独的状态。
.wrapper{
  width: 60%;
  margin: 10rem auto;
  border: 1px solid;
  display: flex;
}

.item{
  width: 50%;
  border: 1px solid grey;
  height: auto;
  padding: 2rem 3rem;
}

.itemHover{
  background: grey;
}


import React, {useState} from "react";
import "./styles.css";

export default function TextDiv({t}) {
  const [hover, setHover] = useState(false);

    let cclass = hover ? "item itemHover":"item";
    return (
      <div className={cclass} onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}>
          {t}
      </div>
    )
}

import React, {useState} from "react";
import TextDiv from './TextDiv'
import "./styles.css";

export default function App() {
    const texts = ["Arjun", "Andy"];
    return (
        <div className="wrapper">
            {
              texts.map((t, i) => (
                <TextDiv t={t} key={i}/>
              ))
            }
        </div>
    )
}

.item:hover{
  background: grey;
}