在ReactJs中悬停时替换元素

Question

在这段代码中

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

每当用户将鼠标悬停在'icon'div上时,此代码

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

应该用这个替换

<p> Lorem ipsum </p>

我能够实现更改样式但不知道如何替换元素.请帮帮我.

Answer 1

与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,而不仅仅是两者的共享方法,就像我一样.

哦,你有一个错字:你写的class而不是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>