如何排序此组件图？反应

Question

我了解如何单独使用javascript进行排序，但我使用了一个教程来创建此Notes组件列表，而且我不知道在不干扰地图的情况下进行排序。

我没有尝试太多，我只是无法想象在哪里按renderDate（date）排序

import React from "react";
import { Link } from "react-router-dom";
import dayjs from "dayjs";

import "./plan-list.css";

function renderDate(date) {
  let d = dayjs(date);
  return d.format("MMMM D YYYY, HH:mm");
}

const Note = ({ note: { _id, title, body, updatedAt, date } }) => (
  <Link to={`/notes/${_id}`}>
    <div className="notes-list-item">
      <h2>{title}</h2>
      <span className="notes-list-date">{renderDate(date)}</span>
    </div>
  </Link>
);

export default ({ notes }) => (
  <div className="notes-list">
    {notes.map(none => (
      <Note note={none} key={`note-${none._id}`} />
    ))}
  </div>
);

像这样，但在哪里？

notes.sort((a, b) => {
  return (a.date > b.date) ? 1 : -1
})

notes.sort((a, b) => {
  return (a.{renderDate(date)} > b.{renderDate(date)}) ? 1 : -1
})

Answer 1

排序和创建元素

export default ({ notes }) => (
  <div className="notes-list">
    {notes.sort((a, b) => { return (a.date > b.date) ? 1 : -1 }).map(none => (
      <Note note={none} key={`note-${none._id}`} />
    ))}
  </div>
);