在 React.js 中为新添加的元素设置动画

Question

我有一个 react 组件，它使用 ReactCSSTransitionGroup 进行 CSS 转换，我的服务器启动并运行了一个虚拟数据库和一个返回对象数组的 API 调用，然后出于测试目的，我使用 setTimeout 进行查询我的 api 网址：

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var ItemsList = React.createClass({
    getInitialState: function() {
        return {
            items: [],
            api: {
                getItems: '/api/items'
            }
        }
    },

    componentDidMount: function() {
        this.fetchData();
    },

    fetchData: function() {
        $.get(this.state.api.getItems, function(data) {               
            this.setState({
              items: data
            });
            setTimeout(this.fetchData, 3000);
        }.bind(this));
    },

    render: function() {
        var items = this.state.items.map(function(item, index) {
            return (
                <div className="title" key={index}>                                             
                    {item.title}                    
                </div>
            );
        }.bind(this));
        return (
            <div className="content">
                <ReactCSSTransitionGroup transitionName="example">
                    {items}
                </ReactCSSTransitionGroup>
            </div>      
        );  
    }
});

React.render(
    <ItemsList />,
    document.querySelector('.react')
);

这是 CSS：

.example-enter {
   opacity: 0.01;
}

.example-enter.example-enter-active {
   opacity: 1;
   transition: opacity 2.5s ease-in;
}

.example-leave {
   opacity: 1;
}

.example-leave.example-leave-active {
   opacity: 0.01;
   transition: opacity 2.5s ease-in;
}

我想要实现的是，每次将一个项目添加到数组中时，我都希望它动画化，但是有一个条件 - 新项目必须出现在列表的顶部。

所以我在 PHP 中执行 orderBy created_at DESC 并成功返回所有对象（按照我想要的顺序），但是 React.js 将新对象呈现在顶部，然后为最后一个元素设置动画（即使它添加了一个新的在顶部）。

我做错了什么？ :(

Answer 1

想通了！

我不得不这样做

<div className="title" key={item.id}>                                             
     {item.title}                    
</div>

代替：

<div className="title" key={index}>                                             
     {item.title}                    
</div>

因为index 来自一个数组，并且每次添加一个元素都会改变。