在这段代码中
<div class='wrapper'>
<div class='icon'>
<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
</div>
</div>
每当用户将鼠标悬停在“图标”div 上时，此代码
<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
应该用这个替换
<p> Lorem ipsum </p>
我能够实现改变样式，但不知道如何替换元素。请帮助我。
与 React 中的大多数事情一样，您需要一个状态。就像是：
constructor() {
super();
this.state = {isHovered: false};
}
只要用户将鼠标悬停在图标内或图标外，此状态就需要更改：
toggleHover() {
this.setState(prevState => ({isHovered: !prevState.isHovered}));
}
<div className='icon' onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
然后是决策逻辑what应显示，具体取决于该状态：
{this.state.isHovered ?
<p> Lorem ipsum </p> :
<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
}
您可能需要两种单独的方法，一种用于onMouseEnter和一个用于onMouseLeave，而不是像我一样只是两者共享的方法。
哦，你有一个错字：你写了class而不是className在几个地方。
Demo
class App extends React.Component {
constructor() {
super();
this.state = {isHovered: false};
this.toggleHover = this.toggleHover.bind(this);
}
toggleHover() {
this.setState(prevState => ({isHovered: !prevState.isHovered}));
}
render() {
return (
<div className='wrapper'>
<div className='icon' onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
{this.state.isHovered ?
<p> Lorem ipsum </p> :
<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
}
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
.icon i {
display: block;
width: 32px;
height: 32px;
background: url('https://via.placeholder.com/32x32');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
