javascript React：以相反的顺序呈现列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30019923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React: Rendering a list in reverse order
提问by hedgeday
I'm building an app with React and Reflux, and I am trying to render a list of items in a specific order.
我正在使用 React 和 Reflux 构建一个应用程序，我正在尝试以特定顺序呈现项目列表。
The items are custom Post components that are rendered in reverse chronological order, so the newest post is at the top of the list.
这些项目是按时间倒序呈现的自定义 Post 组件，因此最新的帖子位于列表的顶部。
I am using Khan Academy's TimeoutTransitionGroupto have the list items fade in and out.
我正在使用可汗学院的TimeoutTransitionGroup来让列表项淡入淡出。
The problem I'm seeing is that when I add a new post and the component gets the updated list via new props, the transition happens on the lastelement in the list rather than the first. I would like to have it so that the first element fades in, since that's the position of the new item that was added.
我看到的问题是，当我添加一个新帖子并且组件通过新道具获取更新的列表时，转换发生在列表中的最后一个元素而不是第一个元素上。我想要它，以便第一个元素淡入，因为这是添加的新项目的位置。
Post 2 <- This post was newly added
帖子 2 <- 这个帖子是新添加的
Post 1 <- This post fades in
帖子 1 <- 此帖子淡入
Is there a way to specify the same order of items, but render them in the reverse order, or something similar?
有没有办法指定相同的项目顺序，但以相反的顺序呈现它们，或类似的东西？
This is my component's render function:
这是我的组件的渲染功能：
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>
);
This is the CSS transition:
这是 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;
}
Any help will be much appreciated!
任何帮助都感激不尽！
回答by vkurchatkin
You shouldn't use index as key, it defeats the purpose. For example, if you add an item to the beginning of the array, react will detect only one new key - the last one. All other components would be reconciled according to their keys. You should use unique id of a post as a key instead.
你不应该使用 index as key，它违背了目的。例如，如果您将一项添加到数组的开头，react 将仅检测一个新键 - 最后一个。所有其他组件将根据它们的键进行协调。您应该使用帖子的唯一 ID 作为密钥。
回答by Christian Matthew
I had a similar issue but it seemed the op had an initial issue of how to properly utilize key in react. With that said this worked for reversing the ordering from ascending to descending.
我有一个类似的问题，但似乎操作员有一个关于如何在反应中正确使用密钥的初始问题。话虽如此，这有助于将顺序从升序反转为降序。
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>
);
}
});
