Предоставление анимации компонента React при монтировании

Question

Я пытаюсь заставить этот компонент двигаться при подключении, но получаю

Cannot read property 'enter' of undefined

Вот упрощенный код (у меня есть все готовые классы CSS):

class Example extends React.Component {
  state = {
    transitionIn: false,
  };

  componentDidMount = () => {
    this.setState({ transitionIn: true })
  }

  render() {
    return (
      <CSSTransition
        in={this.state.transitionIn}
        timeout={1000}
        className={'wordTransition'}
      >
        <div>dksjfnsdkjnfj</div>
      </CSSTransition>
    );
  }
}

https://codesandbox.io/s/rj5046zxoo

Answer 1

Я полагаю, что ошибка, с которой вы столкнулись, - это ошибка, которую вы исправили в приведенной выше ссылке codeandbox.io. У меня была такая же проблема. Вместо того, чтобы называть опору, которая принимает имя класса для использования в качестве префикса для различных переходных состояний classNames (множественное число) Я использовал более знакомые className (единственное число).

Повторим: внутри <CSSTransition> компонент, убедитесь, что вы используете classNames опора и нет className как вы бы внутри html-элементов реагирующего компонента.

Я чувствую, что выбор со стороны React Transition Group использовать опору под названием classNames в их компоненте сбивает с толку и, возможно, следует пересмотреть.