javascript - 如何对这个组件图进行排序？反应

Question

我了解如何在 javascript 中单独排序，但我使用教程来创建此注释组件列表，并且我不知道在不干扰地图的情况下在哪里排序。

我没有尝试太多，我只是无法想象在哪里按 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
})

标签： javascriptreactjs

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