CSSTransition группы реакции-перехода, условный с нулем

Попытка заставить работать простой плавный переход.

Я пытался перемещать <CSSTransition> в разные области, но безрезультатно. Я успешно использую это в другом компоненте, который отображает дочерние элементы, но не понимаю, почему это не сработает в этом случае, поскольку я визуализирую его вместе с дочерним компонентом, если дочерний элемент вообще возвращается.

Дочерний компонент

const Error = (props) => {
  return (
    <CSSTransition timeout = {400} classNames = {errorTransition}>
      <span> {props.errorString} </span>
    </CSSTransition>
  )
}

Родительский компонент

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';

import type { InfoState } from './state';
import { closeError } from './actions';

const mapStateToProps = (state: {info: InfoState}) => ({
  info: state.info.data.info,
  infoError: state.info.infoError,
});

const mapDispatchToProps = dispatch => ({
  closeError: () => dispatch(closeError()),
});

class Parent extends Component<Props, State> {
  state = { info: this.props.info };

  handleChangeEvent = (e) => {
    this.setState({ info: e.target.value });
    this.props.closeError();
  }

  render() {
    if (this.props.info === null) {
      return (
        <div className = "info-wrapper">
          <input
            type = "text"
            value = {this.state.info ? this.state.info : '' }
            onChange = {this.handleChangeEvent}
          />
        </div>
        <div className = "info-error">
          { this.props.infoError !== ''
            ? <Error 
                key = {this.state.info} 
                errorString = {this.props.infoError} 
              />
            : null
           }
        </div>
      )
    }
    return ( <div> things </div> )
  }
}

CSS

.errorTransition-enter {
  opacity: 0.01;
}
.errorTransition-enter-active {
  opacity: 1;
  transition: all 400ms ease-out;
}
.errorTransition-exit {
  opacity: 1;
}
.errorTransition-exit-active {
  opacity: 0.01;
  transition: all 400ms ease-out;
}

Можете ли вы поделиться всем внутри компонентов? Спасибо.

Javier Molinas Vilas 06.03.2019 19:45

Вы уверены, что это условие: this.props.infoError !== ' ' возвращает true?

ladyk 06.03.2019 19:48

@ladyk ага! Я ловлю ошибку каждый раз правильно

raccoon_nine 06.03.2019 20:07

поэтому я думаю, что дело в том, что вы не передаете параметр 'в' в CSSTransition, посмотрите на пример: reactcommunity.org/react-transition-group/css-transition/…

ladyk 06.03.2019 20:21

@ladyk Я тоже так пробовал, так что у меня было in = { props.errorString !== '' }, но перехода все еще нет

raccoon_nine 06.03.2019 20:27

Хм, можно ли предоставить рабочий пример codepen с этой частью вашего кода?

ladyk 06.03.2019 20:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
6
1 674
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У меня была аналогичная проблема с условным удалением элемента, обернутого <CSSTransition>. Чтобы решить проблему, я обернул элемент <CSSTransition> элементом <TransitionGroup> и использовал его свойство ребенокФабрика. childFactory prop можно использовать так:

  <TransitionGroup
     childFactory = {child => React.cloneElement(child)}
  >
    <CSSTransition timeout = {400} classNames = {errorTransition}>
      <span> {props.errorString} </span>
    </CSSTransition>
  </TransitionGroup>

Другие вопросы по теме