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

Posted 2023-02-22

【中文标题】React：以相反的顺序呈现列表

【英文标题】：React: Rendering a list in reverse order

【发布时间】：2015-07-13 05:40:15

【问题描述】：

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

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

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

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

---

帖子 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;

任何帮助将不胜感激！

【参考方案1】：

你不应该使用索引作为key，它违背了目的。例如，如果您将一个项目添加到数组的开头，react 将只检测一个新键 - 最后一个。所有其他组件将根据它们的密钥进行协调。您应该使用帖子的唯一 ID 作为键。

【讨论】：

更改密钥效果很好。现在很明显，你指出来了。谢谢！

这是开始使用 ReactCSSTransitionGroup 时最棘手的部分之一，因为 React 通常只会抱怨 key 属性，因为它只是在您在循环中生成的元素/组件上不存在。 .. 因为它不会抱怨项目被重新渲染但它们的keys 保持不变的情况，所以很难弄清楚发生了什么。很好的答案！

该死！这确实解决了我的问题。感谢关于不使用索引作为组件的提示key

我总是发现使用字符串作为指示符加上 Math.random() 在没有唯一 ID 可使用时生成唯一键最有用。

【参考方案2】：

我遇到了类似的问题，但似乎操作人员最初遇到了如何正确利用 key in react 的问题。话虽如此，这有助于将顺序从升序反转为降序。

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

);

【讨论】：

这将修改您应该使用的原始数组 [...notes].reverse()

@fareednamrouti 你能解释一下修改原始数组有什么问题吗？什么是完整的语法，我会调整它。谢谢。

修改原始数据会导致很多问题：1-这将阻止组件知道该属性是否已更改，因此它可能不会再次重新渲染自己2-每次您的组件渲染时它将再次反转数组，我建议您阅读有关函数式编程和 Redux 的更多信息

我不记得这是否是我的确切实现，但它按预期工作。同样，我没有看到您发布的内容，即 [notes].reverse()... 以及我发布的内容... 我想这就是混乱

[...notes] 只会复制数组你也可以使用notes.concat()，数组的反向函数会修改原始数组，这样做是不对的