Logo
Section 1 / 10

挑战:排序

尝试在 React 应用中实现排序。

导入

挑战:排序

尝试在 React 应用中实现排序。

我们已经涵盖了 React 的大部分基础知识、其遗留特性以及维护应用程序的技术。现在,是时候深入学习开发实际的 React 应用程序了。接下来的每一节都会附带一个任务。请先尝试在不查看“可选提示”的情况下完成这些任务,但请注意,初次尝试时可能会有一定难度。如果需要帮助,可以参考“可选提示”或本节中的说明。


任务

处理项目列表时,通常需要提供一些交互功能,以便用户更方便地浏览数据。目前,每个条目都以其所有属性列出。为了让列表更具可探索性,应支持按标题(title)、作者(author)、评论数(comments)和评分(points)对列表进行排序。当前只需实现单向排序即可,反向排序将在下一节中介绍。

可选提示:

  • 在 App 或 List 组件中引入一个新的排序状态。
  • 为每个属性(例如 title、author、points、num_comments)添加一个 HTML 按钮,用于设置该属性的排序状态。
  • 使用排序状态对 list 应用相应的排序函数。
  • 建议使用 Lodash 等工具库中的 sortBy 函数来简化排序操作。

React 维护

解决方案回顾:排序