Reactjs: исчезающие данные не работают должным образом - PullRequest
Новая
       33

Reactjs: исчезающие данные не работают должным образом

0 голосов
/ 06 января 2019

У меня есть кнопка в Компоненте приложения, если я нажимаю на эту кнопку, я получаю следующий элемент в массиве в Компоненте, но проблема теперь с переходом с постепенным появлением, работает только первый элемент, а не работает для следующего элемента. как я могу позволить Fade-in Transition работать для следующих элементов?

Мой код: 

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;

1 Ответ

0 голосов
/ 07 января 2019

Не используйте эту библиотеку. Он делает именно то, что должен, постепенно добавляя элементы, когда компонент (страница в вашем случае) монтируется, но вам нужен переход при каждом повторном отображении

Если вы посмотрите на используемую вами библиотеку (реакции-замирание), вы заметите, что она повторно устанавливает свое состояние на componentDidMount, поэтому она не работает, когда вы устанавливаете состояние (поэтому просто перерисовайте ее, а не размонтировать и снова смонтировать).

Я не нашел быстрого решения, как исправить или переписать эту библиотеку, так что подумайте о своей.

Просмотрите их реализацию (которая просто основана на переходе CSS) и создайте свое решение.

реагировать-Fade-в: https://github.com/gkaemmer/react-fade-in/blob/master/src/FadeIn.js

...