Javascript 我是什么'；在使用React Transition Group组件构建旋转木马时，是否缺少该组件？

我只是想让我的不透明度在图像之间改变。我正在构建一个旋转木马，一旦你点击图标，图像就会改变。我相信我遗漏了一个或两个属性，或者我正在使用的逻辑和方法是正确的，但是我找不到我所看到的其他示例之间的太多差异。由于某种原因，React过渡组未添加效果。在使用RTG组件构建旋转木马时，我缺少了什么？我非常感谢你的帮助。提前谢谢。下面是我的代码

   // == APP COMPONENT
         import React, { Component } from 'react';
            import './css/app.css';
            import HeroImg from './HeroImg';

            import ReactCSSTransitionGroup from 'react-addons-css-transition-group';


            class App extends Component {
              state = {
                imgID: 1,
                activeImgID: 1,  
              }

              carouselSwitch = (e) => {        
                  this.setState({imgID: e.target.getAttribute('id') - 1,
                                activeImgID: e.target.getAttribute('id') - 1});

      }
              render() {

          return (
                  <div className="container">
                    <div className="heroImg-container">

                      <ReactCSSTransitionGroup
                        transitionName="fade"
                        transitionEnterTimeout={1000}
                        transitionLeaveTimeout={1000}>

                            <HeroImg index={this.state.imgID} />
                      </ReactCSSTransitionGroup>

                      <div className="carousel-btns-wrapper">
                        <div className="carousel-btns">             
                          <i id={1} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 0 ? 'right active' : 'up' }`} />
                          <i id={2} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 1 ? 'right active' : 'up' }`} />
                          <i id={3} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 2 ? 'right active' : 'up' }`} />
                          <i id={4} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 3 ? 'right active' : 'up' }`} />
                        </div>
                      </div>{/* END CAROUSEL-BTNS-WRAPPER */}

                    </div> {/* END HEROIMG-CONTAINER */}
                  </div> /* END CONTAINER */
                 );
              }
            }

            export default App;



    // == HEROIMG Component  
        import React, { Component } from 'react';

        import Stage1 from './images/carousel/stage1.jpg';
        import Stage2 from './images/carousel/stage2.jpg';
        import Stage3 from './images/carousel/stage3.jpg';
        import Stage4 from './images/carousel/stage4.jpg'; 

        class HeroImg extends Component {

            render() {
                const srcs = [Stage1, Stage2, Stage3, Stage4];
                let src = srcs[this.props.index];
                return <img className="fade" src={src} alt='Military Images Carousel'  />;
            }
        } 

        export default HeroImg;

// == CSS
    .fade-enter {
      opacity: 0.01;
    }

    .fade-enter.fade-enter-active {
      opacity: 1;
      transition: opacity 500ms ease-in;
    }

    .fade-leave {
      opacity: 1;
    }

    .fade-leave.fade-leave-active {
      opacity: 0.01;
      transition: opacity 300ms ease-in;
    }

/==应用程序组件
从“React”导入React，{Component}；
导入“/css/app.css”；
从“./herogramg”导入herogramg；
从“react addons css转换组”导入ReactCSTranslationGroup；
类应用程序扩展组件{
状态={
imgID:1，
activeImgID:1，
}
转盘开关=（e）=>{
this.setState（{imgID:e.target.getAttribute（'id'）-1，
activeImgID:e.target.getAttribute（'id'）-1}）；
}
render（）{
返回(
{/*端部转盘-BTNS-WRAPPER*/}
{/*mg-CONTAINER*/}
/*端部容器*/
);
}
}
导出默认应用程序；
//==mg分量
从“React”导入React，{Component}；
从“./images/carousel/Stage1.jpg”导入Stage1；
从“/images/carousel/Stage2.jpg”导入Stage2；
从“/images/carousel/Stage3.jpg”导入Stage3；
从“./images/carousel/Stage4.jpg”导入Stage4；
类扩展组件{
render（）{
const srcs=[Stage1，Stage2，Stage3，Stage4]；
设src=srcs[this.props.index]；
返回；
}
} 
出口违约金；
//==CSS
.淡入{
不透明度：0.01；
}
.fade-enter.fade-enter-active{
不透明度：1；
过渡：不透明度500ms缓和；
}
.淡出{
不透明度：1；
}
.fade-leave.fade-leave-active{
不透明度：0.01；
过渡：不透明度300毫秒；
}

“CSS转换组的工作原理是将转换类应用于正在进入和退出其子元素的子元素（通过键跟踪）。”[]

尝试：

<HeroImg index={this.state.imgID} key={this.state.imgID}/>