如何反转具有关键唯一id的动态子列表的顺序?

React - How can I reverse the order of dynamic children lists that have a key unique id

本文关键字:动态 列表 顺序 id 唯一 何反转      更新时间:2023-09-26

https://jsfiddle.net/justindeal/8hqqgbuf/5/?utm_source=website& utm_medium = embed& utm_campaign = 8 hqqgbuf

有一个从数组创建的列表。我想把最新的条目放在最上面,而不是放在最下面。除了添加xxxxx之外,我找不到任何关于如何精细牙齿控制的内容。已经完成的键Id。

是代码示例。

var NotesList = React.createClass({
render: function () {
    var notes = this.props.notepad.notes;
    return (
        <div className="note-list">
            {
                notes.map(function (note) {
                    return (
                        <NoteSummary key={note.id} note={note}/>
                    );
                })
            }
        </div>
    );
}
});

所以我想用一个常见的javascript方法,你可以通过map方法反转数组的顺序,它工作。

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