Javascript 替换ReactJs中悬停的元素

在此代码中

 <div class='wrapper'>
     <div class='icon'>
        <i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
      </div>
 </div>

<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />

每当用户将鼠标悬停在“icon”div上时，此代码

 <div class='wrapper'>
     <div class='icon'>
        <i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
      </div>
 </div>

<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />

应该换成这个

<p> Lorem ipsum </p>

Lorem ipsum

---

我能够改变风格，但不知道如何替换元素。请在这方面帮助我。

与React中的大多数内容一样，您需要一个状态。比如：

constructor() {
  super();
  this.state = {isHovered: false};
}

每当用户将鼠标悬停在图标内或图标外时，此状态都需要更改：

toggleHover() {
  this.setState(prevState => ({isHovered: !prevState.isHovered}));
}

。图标i{
显示：块；
宽度：32px；
高度：32px；
背景：url（'https://via.placeholder.com/32x32');
}

---

您需要将状态与onMouseCenter和onMouseLeave事件一起使用

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
伊肖弗：错
};
this.onmouseinterhandler=this.onmouseinterhandler.bind（this）；
this.onMouseLeaveHandler=this.onMouseLeaveHandler.bind（this）；
}
onMouseEnterHandler（）{
这是我的国家({
伊肖弗：是的
});
}
onMouseLeaveHandler（）{
这是我的国家({
伊肖弗：错
});
}
render（）{
返回(
{
这个州结束了
？悬停
：一些文字
}
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);
除了@Chris的答案之外，如果您不想创建事件处理程序，那么您可以创建一个内联箭头函数来完成此任务

onMouseEnter={()=> this.setState({isHovered: true})}

onMouseLeave={()=> this.setState({isHovered: false})}

这只是一个你可以用的速记