0

如果我单击此按钮，我在应用程序组件中有一个按钮，我会在组件中的数组中获得下一个项目，但现在的问题是淡入转换仅适用于第一个项目，而不适用于下一个项目。我怎样才能让淡入过渡适用于下一个项目？

我的代码：

import React, { Component } from 'react';
import FadeIn from 'react-fade-in';

class App extends Component {
  constructor(props){
    super(props);
    this.state={indexTeam:0}
  }

  nextTeam=() => {
     this.setState({ indexTeam: (this.state.indexTeam + 1) % teamList.length });
  };

  render() {
    const teams = teamList[this.state.indexTeam];
    return (
      <div>
       <FadeIn><h3>{teams.name}</h3></FadeIn>
       <br/>
       <button onClick={this.nextTeam}>Next Team</button>
      </div>
    );
  }
}

const teamList = [
  {
    name: "1- Manchester United"
  },
  {
    name: "2- Fc Barcelona"
  },
  {
    name: "3- Inter Milan"
  },
  {
    name: "4- Liverpool"
  }
];

export default App;
4

1 回答 1

0

不要使用那个库。它确实应该在组件（在您的情况下为页面）安装时一个一个地淡入元素，但是您需要在每次重新渲染时进行转换

如果您查看正在使用的库（react-fade-in），您会注意到它会重新初始化它在 componentDidMount 上的状态，因此当您设置状态时它不起作用（因此，只需重新渲染它，而不是卸载和安装再次）。

我没有想出任何快速的解决方案来修复或重写这个库，所以想想你的。

查看他们的实现（仅基于 css 转换）并创建您的解决方案。

反应淡入： https ://github.com/gkaemmer/react-fade-in/blob/master/src/FadeIn.js

于 2019-01-06T21:01:59.583 回答