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

Question

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

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;
}

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

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

我究竟做错了什么？:(

Answer 1

弄清楚了！

我必须做

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

代替：

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

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