javascript - 在 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 来自一个数组，每次添加元素时它都会改变。