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

Question

在这个 JS fiddle 中: https://jsfiddle.net/justindeal/8hqqgbuf/5/?utm_source=website&utm_medium=embed&utm_campaign=8hqqgbuf

有一个从数组创建的列表。我希望最新的条目位于顶部，而不是位于底部。除了为已完成的 key 添加 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>
    );
}
});

Answer 1

所以我想用一个常见的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>
    );
}
});