React：以相反的顺序呈现列表

Question

我正在使用 React 和 Reflux 构建一个应用程序，我正在尝试按特定顺序呈现项目列表。

这些项目是按时间倒序呈现的自定义 Post 组件，因此最新的 post 位于列表顶部。

我正在使用可汗学院的 TimeoutTransitionGroup 让列表项淡入淡出。

我看到的问题是，当我添加一个新的 post 并且组件通过新的 props 获取更新列表时，转换发生在 last列表中的元素而不是第一个。我想要它以便第一个元素淡入，因为那是添加的新项目的位置。

Post 2 <- 这个post是新加的

Post 1 <- 这个 post 淡入

有没有办法指定项目的相同顺序，但以相反的顺序呈现它们，或者类似的东西？

这是我组件的渲染函数：

    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，它违背了目的。例如，如果您将一个项目添加到数组的开头，React 将只检测一个新键 - 最后一个。所有其他组件将根据它们的密钥进行协调。您应该使用 post 的唯一 ID 作为键。

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

React：以相反的顺序呈现列表

React: Rendering a list in reverse order

javascript

khan-academy

reactjs

reactcsstransitiongroup

refluxjs