Question

我试图对延迟加载的组件实施自己的淡入效果，但无济于事。我正在关注this blog post。我的问题是CSSTransition元素根据当前状态有条件地渲染图像。如果我将state.loaded预先设置为false，它将永远不会调用其子项（后者会返回图像并将state.loaded设置为true）。这种状态变化对于我触发动画是必要的。我不知道如何解决此问题...

代码在Code Sandbox

上

class FadeIn extends React.Component {
  state = { loaded: false };

  onLoad = () => {
    this.setState({ loaded: true });
    // () => console.log(this.state))
  };

  render() {
    return (
      <LazyLoad throttle={2000} height={200} key={Math.random()}>
        <CSSTransition
          in={this.state.loaded}
          timeout={350}
          classNames="fade"
          unmountOnExit
        >
          {state => {
            console.log(state);
            return <div>{this.props.children(this.onLoad)}</div>;
          }}
        </CSSTransition>
      </LazyLoad>
    );
  }
}

class App extends React.Component {
  url =
    "https://images.unsplash.com/photo-1549773361-99a3f9af88fe?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ";
  state = {
    images: Array(30).fill(this.url)
  };

  componentDidMount() {}

  renderImages = () => {
    return this.state.images.map(url => {
      return (
        <FadeIn key={Math.random()}>
          {onLoad => (
            <img src={this.url} key={String(Math.random())} onLoad={onLoad} />
          )}
        </FadeIn>
      );
    });
  };

  render() {
    return <div className="list">{this.renderImages()}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

具有CSSTransition的FadeIn效果，用于React LazyLoaded图像

0 个答案: