Javascript reactjs-为从数组渲染的列表项在悬停状态下渲染单个图标

我有这类卡片，它们是从一系列对象中渲染出来的

父组件：

[{foo:'bar'，baz:[{name:string，path:string:'/'}]

state={isHovering:false}

handleMouseHover = () => {
    const { isHovering } = this.state;
    this.setState({ isHovering: !isHovering });
}

)

我将把

handlemousehaver（）

和

isHovering

作为道具传递给子组件

结果是这样的：

子组件

<LinkContainer
  onMouseEnter={handleMouseHover}
  onMouseLeave={handleMouseHover}
  className="linkContainer"
>

 {isHovering && (
   <FontAwesomeIcon
     icon="copy"
     className="copyIcon"
     onClick={copyToClipboard}
   />
 )}

{Ishoring&&(
)}

结果是4张包含3个链接的卡片。每次我将鼠标悬停在一个链接上时，我都希望“复制到剪贴板”图标显示出来。但是，当我将鼠标悬停在任何项目上时，它会将“IsOverhing”设置为“true”，从而使所有图标可见。理想情况下，我只希望我悬停在上面的链接的图标可见。有人能看到吗帮助我找出一个更好的解决方案，或者改进我已经编写的代码

---

非常感谢！

在数组的项上动态创建一个属性isHovered，并在鼠标悬停时传递您获得的项。映射，现在切换isHovered属性。现在应该可以工作了。

您可以将对象保持在您的状态，而不是布尔值，该布尔值有一个键，指示以该键作为索引的对象是悬停还是not

示例

类应用程序扩展了React.Component{
状态={
arr:[{text:“foo”}，{text:“bar”}]，
isHovered:{}
};
HandleMouseCenter=索引=>{
this.setState（prevState=>{
返回{isHovered:{…prevState.isHovered[index]：true}；
});
};
handleMouseLeave=索引=>{
this.setState（prevState=>{
返回{isHovered:{…prevState.isHovered[index]：false}；
});
};
render（）{
const{arr，isHovered}=this.state；
返回(
{arr.map（（el，index）=>(
this.handlemouseinter（index）}
onMouseLeave={（）=>this.handleMouseLeave（索引）}
text={el.text}
isHovering={isHovered[index]}
键={index}
/>
))}
);
}
}
函数子级（{onMouseCenter、onMouseLeave、text、IsOvering}）{
返回(
{text}{isHovering&&（悬停！）“}
);
}
ReactDOM.render（，document.getElementById（“根”）；

感谢您的及时和详细的回复。我正在尝试实现这一点。我在父组件上没有映射，实际上我在子组件上有映射。我如何处理

Ishored[index]

那样的话。@rowmna不客气。我不太清楚我是否理解。也许你可以在每个子组件中都有一个单独的状态，而不是一个

IShoring

道具？你是什么意思？我想它几乎可以工作了，从技术上讲，这就是我要找的东西，非常好！我的父组件是一个容器（类组件），它从一个reducer接收props，这给了我该结构中的有效负载。在我的子组件中，我执行循环和分配。希望这更清楚一点。我按照您的建议将状态降低到子组件，效果很好。再次感谢您的输入！@Tholle