Предоставление анимации компонента 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, вводит в заблуждение и, возможно, ее следует пересмотреть.