Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.04.2019, 22:08
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

Вопрос по react-transition-group
Создаю через .map ряд объектов, к ним добавляю значение из state, которое когда становится true, то анимация для каждого объекта срабатывает.
У этих объектов есть кнопки фильтры, они лежат в компоненте <FilterButtons />.
По нажатию на каждую из них фильтруется массив через .filter
и когда массив отфильтровался, объекты отрисовываются уже без анимации, потому что значение из state стало true при загрузке компонента и анимации сработали только для всего массива, но как сделать что бы анимация работала когда срабатывает фильтр? подскажите если кто знает, сломал голову уже. Вот код компонента и действий из Redux

Сам компонент:
class Projects extends Component {

  componentDidMount() {
    this.props.pageLoaded(); //делаю  projectsPageLoaded: true  в redux state через action (pageLoaded), поэтому вначале весь массив отображается с анимацией, но потом при применении фильтра к массиву анимации не срабатывают,потому что projectsPageLoaded остается true

  }

  render() {
    const { projects, projectsPageLoaded } = this.props;
  	return (
          <div>
            <FilterButtons />
              {
                projects.map((project, idx) => {
                  return (
                    <CSSTransition
                      in={projectsPageLoaded}
                      timeout={300}
                      classNames="project-card">
                      <div>
                        {project.title}
                      </div>
                    </CSSTransition>
                  )
                })
              }
          </div>  
  	)

  }
};
//state
const mapStateToProps = ({ projects, projectsPageLoaded}) => {
  return { projects, projectsPageLoaded }
};
//action
const mapDispatchToProps = (dispatch) => {
  return {
    pageLoaded: () => dispatch({
      type: 'PROJECT_PAGE_LOADED'    
    })

  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Projects);

Действия Redux для фильтрации массива
const filter = (state, filter) => {
  switch(filter) {
    case'all':
      return {
        ...initialState      
      }  
    case'react':
      const react = initialState.projects.filter((item) => item.done);
      return {
        ...state,
        activeFilter: filter,
        projects: react,
      }        
    case'fullstack':
      const fullstack = initialState.projects.filter((item) => !item.done);
      return {
        ...state,
        activeFilter: filter,
        projects: fullstack
      }

  }
};


Reducer
const reducer = (state = initialState, action) => {
  console.log(action.type);
  //actions
  switch (action.type) {

    case 'PROJECT_PAGE_LOADED':
      return {
        ...state,
        projectsPageLoaded: true

      }; 
    case 'ON_FILTER_CHANGE':
      return filter(state, action.payload)

    default:
      return state;
  }
};

Последний раз редактировалось NeonMan, 22.04.2019 в 22:18.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
В поисках фронтендера React Js Москва jobcallt Работа 0 21.07.2017 10:56
Ищем скилового фронтендщика, пишущего на React JS, Bootstrap A-Team Работа 0 15.02.2017 17:17
React Native разработчики где Вас искать? MakarkinPRO Мобильный JavaScript 0 02.11.2016 21:52
Нужен фронтенд разработчик со знанием React JS удаленно на проект sergeda Работа 0 13.11.2015 18:40
закрыть окно js Artem215 Элементы интерфейса 10 22.04.2015 15:34