贴一个react CSSTransitionGroup轮播,请大家帮忙看看有没有什么问题和可以优化的地方,谢谢~

Question

1.index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Slide from '../components/Slide.js';
import '../css/style.scss';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imgSrc: [
                'https://s1.sonkwo.com/FhXx9C5gqykP4UUJHPKfpS1cexVP',
                'http://7fvk4m.com1.z0.glb.clouddn.com/Fjn9lT9RdzW1dpIJ_7vSrxB4UKNB',
                'http://7fvk4m.com1.z0.glb.clouddn.com/FsDTCVnB9DYkWF-m0p7zNdVfadTg'
            ],
            currentIndex: 0
        };
        this.timer = null;
    }
    componentDidMount() {
        this.timer = setInterval(() => {
            let currentIndex = this.state.currentIndex;
            currentIndex++;
            if (currentIndex > this.state.imgSrc.length - 1) {
                currentIndex = 0;
            }
            this.setState({
                currentIndex
            });
        }, 3000)
    }
    componentWillUnmount() {
        clearInterval(this.timer);
    }
    render() {
        let { currentIndex, imgSrc } = this.state;
        return (
            <div>
                <Slide
                    component='div'
                    transitionName="slide"
                    enterDelay={ 1000 }
                    leaveDelay={ 1000 }
                    imgSrc={ imgSrc }
                    currentIndex = { currentIndex }
                    slideClassName="slide-div" />
            </div>
        );
    }
}

render(<App />, document.getElementById('root'));

2.Slide.js

import React, { Component, PropTypes } from 'react';
import CSSTransitionGroup from 'react-addons-css-transition-group';

export default class Slide extends Component {
    static propTypes = {
        component: PropTypes.string.isRequired,
        transitionName: PropTypes.string.isRequired,
        enterDelay: PropTypes.number.isRequired,
        leaveDelay: PropTypes.number.isRequired,
        slideClassName: PropTypes.string.isRequired,
        imgSrc: PropTypes.array.isRequired,
        currentIndex: PropTypes.number.isRequired
    };
    render() {
        let { imgSrc, currentIndex, component, transitionName, enterDelay, leaveDelay, slideClassName } = this.props;

        return (
            <div>
                <CSSTransitionGroup
                    component={ component }
                    transitionName={ transitionName }
                    transitionEnterTimeout={ enterDelay }
                    transitionLeaveTimeout={ leaveDelay }
                    className={ slideClassName }
                >
                    <img src={ imgSrc[currentIndex] } key={ imgSrc[currentIndex] } />
                </CSSTransitionGroup>
            </div>
        );
    }
}

3.style.scss

.slide-div {
    width: 440px;
    height: 260px;
    overflow: hidden;
    .slide-enter {
        opacity: 0.01;
        &.slide-enter-active {
            opacity: 1;
            transition: opacity 1s ease-in-out;
        }
    }
    .slide-leave {
        opacity: 1;
        &.slide-leave-active {
            opacity: 0.01;
            transition: opacity 1s ease-in-out;
        }
    }
}