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

Я создаю приложение с 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;
}

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

6
javascript khan-academy reactcsstransitiongroup reactjs refluxjs

2 ответов

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

16

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

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