反应:以相反的顺序渲染列表

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,它会破坏目的.例如,如果将项添加到数组的开头,则react将仅检测一个新键 - 最后一个.所有其他组件将根据其密钥进行协调.您应该使用帖子的唯一ID作为键.