Question

如果我单击该按钮，则会在App Component中有一个按钮，但我会在Component中找到数组中的下一个项目，但是现在的问题是，渐入过渡仅对第一个项目起作用，而对下一个项目不起作用。我如何让渐入过渡功能用于下一个项目？

我的代码：

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;

Answer 1

不要使用该库。确实可以做到，在装入组件（在您的情况下为页面）时，一个接一个地淡入元素，但是您需要在每次重渲染时进行过渡

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

我没有想出任何解决或重写此库的快速解决方案，所以请考虑一下您的库。

仔细研究它们的实现（这仅基于CSS转换）并创建您的解决方案。

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

React.js：渐入式数据无法正常工作

1 个答案: