React: Оказание списка в обратном порядке

Question

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

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

Я использую Академию Хана 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

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

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