javascript - 如何在React.js中以异步方式加载悬停效果的图像？

Question

您可能已经见过这种效果。示例 - https://codepen.io/anon/pen/GEmOQy

但我需要在 React 中实现同样的方式。我知道我可以使用ajax的componentDidMount方法，但问题是如何在悬停时显示响应。

我没有使用 React 实现悬停的练习，就像我在使用 :hover 的纯 CSS 方法中所做的那样。

所以欢迎任何解决方案。

Answer 1

这是一个非常简单的问题，并且有很多可能性。我所能给出的只是如何做到这一点的基本框架。
定义一个 ImageCard 组件，您可以在其 componentDidMount 中执行 API 调用。然后在您的父组件(按钮所在的组件)上，存储一个用于管理是否显示卡片的 state 键:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      showCard: false
    };
  }
  render () {
    return (
      <div>
        {
          this.state.showCard &&
        <ImageCard/>
        }
        <button
          onMouseEnter={() => this.setState({ showCard: true })}
          onMouseLeave={() => this.setState({ showCard: false })}
          >Hover Me!</button>
      </div>
    )
  }
}