使用 React js 创建类似于声誉更改的日期标头

Question

我正在尝试创建标题，就像本网站顶部的声誉变化一样。我使用 react js 和 next js。

这是我创建的代码沙箱演示。

https://codesandbox.io/s/react-array-map-xn316

我想要的输出是：

上一个小时

• 内容1

• 内容2

• 内容3

今天

• 内容4

年长的

• 内容5

Answer 1

您的 if-else 逻辑不会为您提供正确的标头，并且您正在将它们压扁在 top-level 上else。你得到正确的标题&nbsp; &nbsp; let listHeader = "--";&nbsp; &nbsp; if (time === "none") {&nbsp; &nbsp; &nbsp; &nbsp; if (hour) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTime("hour");&nbsp; &nbsp; &nbsp; &nbsp; } else if (day) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTime("day");&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTime("older");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; if (hour) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listHeader = "Last Hour";&nbsp; &nbsp; &nbsp; &nbsp; } else if (day) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listHeader = "Today";&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listHeader = "Older";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }您没有对标头中的内容进行分组，因此返回它的方式并不是您想要的。以下代码是有关如何执行此操作的示例import React from "react";import "./App.css";const useLoadData = () => {&nbsp; &nbsp; const data = [&nbsp; &nbsp; &nbsp; &nbsp; {id: "01", content: "content 1", time: "3 seconds ago"},&nbsp; &nbsp; &nbsp; &nbsp; {id: "02", content: "content 2", time: "4 minutes ago"},&nbsp; &nbsp; &nbsp; &nbsp; {id: "03", content: "content 3", time: "35 minutes ago"},&nbsp; &nbsp; &nbsp; &nbsp; {id: "04", content: "content 4", time: "3 hours ago"},&nbsp; &nbsp; &nbsp; &nbsp; {id: "05", content: "content 5", time: "4 days ago"}&nbsp; &nbsp; ];&nbsp; &nbsp; //item 1 should get a heading "Last hour"&nbsp; &nbsp; //item 2 and item 3 should not get a heading. They are also under "Last hour"&nbsp; &nbsp; //item 4 should get a heading "Today"&nbsp; &nbsp; return data;};function findListHeader(item) {&nbsp; &nbsp; let timeC = item.time&nbsp; &nbsp; let listHeader = "--";&nbsp; &nbsp; let hour = false;&nbsp; &nbsp; let day = false;&nbsp; &nbsp; if (timeC.includes("second") || timeC.includes("minute")) {&nbsp; &nbsp; &nbsp; &nbsp; hour = true;&nbsp; &nbsp; }&nbsp; &nbsp; if (timeC.includes("hour")) {&nbsp; &nbsp; &nbsp; &nbsp; day = true;&nbsp; &nbsp; }&nbsp; &nbsp; if (hour) {&nbsp; &nbsp; &nbsp; &nbsp; listHeader = "Last Hour";&nbsp; &nbsp; } else if (day) {&nbsp; &nbsp; &nbsp; &nbsp; listHeader = "Today";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; listHeader = "Older";&nbsp; &nbsp; }&nbsp; &nbsp; return {header: listHeader, item};}export default function App() {&nbsp; &nbsp; const var1 = useLoadData();&nbsp; &nbsp; let headers = ["Last Hour", "Today", "Older"]&nbsp; &nbsp; const itemHeaders = var1.map((itemP) => findListHeader(itemP));&nbsp; &nbsp; const var2 = headers.map((header) =>&nbsp; &nbsp; &nbsp; &nbsp; <CommentOne&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={header}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; header={header}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items={itemHeaders&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .filter(itemWithHeader => itemWithHeader.header === header)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .map(itemWithHeader => itemWithHeader.item)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; />);&nbsp; &nbsp; return <div> {var2} </div>;}function CommentOne({header, items}) {&nbsp; &nbsp; let content = items.map(item => <p>{item.content}</p>)&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>{header}</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {content}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );}