Реагировать TransitionGroup v1

Question

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

Единственные 3 крючка, которые вызываются внутри Фото

• componentDidMount
• componentWillAppear
• componentDidAppear

Я понимаю, почему вышеперечисленное вызывается, но хук componentWillEnter игнорируется. Даже если дочерний тег изображения в Photo.js получает обновленные реквизиты и изменения.

Мой вопрос здесь: почему не запускается componentWillEnter в случае кода ниже? Я просто хочу иметь возможность иметь крючок, который срабатывает, когда

Вот урезанная версия моего кода. У меня есть компонент слайд-шоу. Здесь есть кнопки "Далее" и "Предыдущая", которые обновляют URL-адрес изображения, который передается в мой компонент "Фото". Я не показываю следующие предыдущие функции и обновление {img} реквизита. Просто знайте, что это обновляется.

SlideShow.js

class SlideShow extends Component{
  render(){
// img is the url src to be passed to Photo component as a prop. 
    return(
      <div className="category-slideshow-container">
        <TransitionGroup component={this.firstChild}>
          <Photo img={img} />
        </TransitionGroup>
      </div>
    )
  }
}
}

Photo.js

import React, {Component} from 'react';

export default class Photo extends Component{

  componentDidMount(){
    console.log("componentDidMount");
  }

  componentDidEnter(){
    console.log("componentDidEnter");
  }

  componentWillAppear(callback){
    console.log("componentWillAppear");
    callback();
  }

  componentDidAppear(){
    console.log("componentDidAppear");
  }

  componentWillEnter(callback){
    console.log("componetWillEnter");
    callBack();
  }

  componentWillLeave(){
    console.log("componentWillLeave");
  }

 componentDidLeave(){
   console.log("componentDidLeave");
 }


  render(){
    return(
      <div className="photo-container">
        <img src={this.props.img} className="slideshow-image" alt="slideshow photo"/>
      </div>
    )
  }

}