我正在使用React和Reflux构建应用程序,我正在尝试按特定顺序呈现项目列表。
这些项目是按逆时间顺序呈现的自定义Post组件,因此最新的帖子位于列表的顶部。
我正在使用可汗学院的TimeoutTransitionGroup让列表项淡入淡出。
我看到的问题是,当我添加新帖子并且组件通过新道具获取更新列表时,转换发生在列表中的 last 元素而不是第一个。我想拥有它,以便第一个元素淡入,因为这是添加的新项目的位置。
Post 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;
}
非常感谢任何帮助!
答案 0 :(得分:17)
你不应该将索引用作key
,它会破坏目的。例如,如果将项添加到数组的开头,则react将仅检测一个新键 - 最后一个。所有其他组件将根据其密钥进行协调。您应该使用帖子的唯一ID作为密钥。
答案 1 :(得分:4)
我有一个类似的问题,但似乎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>
);
}
});