Реагирование: рендеринг списка в обратном порядке

Question

Я создаю приложение с помощью React и Reflux и пытаюсь отобразить список элементов в определенном порядке.

Элементы - это пользовательские компоненты Post, которые отображаются в обратном хронологическом порядке, поэтому самая новая запись находится вверху списка.

Я использую TimeoutTransitionGroup Академии Хана, чтобы элементы списка исчезали и исчезали.

Проблема, которую я вижу, состоит в том, что, когда я добавляю новое сообщение, и компонент получает обновленный список с помощью новых реквизитов, переход происходит на последнем элементе в списке, а не на первом. Я бы хотел, чтобы первый элемент исчез, так как это позиция нового элемента, который был добавлен.

---

Сообщение 2 <- Это сообщение было недавно добавлено

---

Сообщение 1 <- Это сообщение исчезает в

---

Есть ли способ указать тот же порядок элементов, но отобразить их в обратном порядке или что-то подобное?

Это функция рендеринга моего компонента:

    if (!(this.props.posts && this.props.ordering)) return false;
    var posts = this.props.ordering.map(function(postId, index) {
        return <Post key={index} post={this.props.posts[postId]}/>;
    }, this);
    return (
        <div className="post-collection">
            <TimeoutTransitionGroup 
                enterTimeout={500}
                leaveTimeout={500}  
                transitionName="postTransition">
                {posts}
            </TimeoutTransitionGroup>
        </div>
    );

Это переход CSS:

.postTransition-enter {
    opacity: 0;
    transition: opacity .25s ease-in;
}

.postTransition-enter.postTransition-enter-active {
    opacity: 1;
}

.postTransition-leave {
    opacity: 1;
    transition: opacity .25s ease-in;
}

.postTransition-leave.postTransition-leave-active {
    opacity: 0;
}

Любая помощь будет высоко ценится!

Answer 1

Вы не должны использовать индекс как key, это побеждает цель. Например, если вы добавите элемент в начало массива, реагирование обнаружит только один новый ключ - последний. Все остальные компоненты будут согласованы в соответствии с их ключами. Вместо этого вы должны использовать уникальный идентификатор сообщения в качестве ключа.

Answer 2

У меня была похожая проблема, но казалось, что у операции была начальная проблема, как правильно использовать ключ в реакции. Тем не менее, это сработало для изменения порядка с возрастания на убывание.

var NotesList = React.createClass({
render: function () {
    var notes = this.props.notepad.notes;

    return (
        <div className="note-list">
            {
                notes.reverse().map(function (note) {
                    return (
                        <NoteSummary key={note.id} note={note}/>
                    );
                })
            }
        </div>
    );
}
});