在这段代码中
<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>
我能够实现更改样式但不知道如何替换元素.请帮帮我.
解决方法
与React中的大多数事情一样,您需要一个州.就像是:
constructor() { super(); this.state = {isHovered: false}; }
当用户将鼠标悬停在图标中或从图标中移出时,此状态需要更改:
toggleHover() { this.setState(prevstate => ({isHovered: !prevstate.isHovered})); }
<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' }} /> }
您可能希望有两个单独的方法,一个用于onMouseEnter,另一个用于onMouseLeave,而不仅仅是两者的共享方法,就像我一样.
哦,你有一个错字:你在几个地方写了课而不是className.
演示
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。