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

我试图创建标题，就像在这个网站的顶部声誉的变化。我使用react js和next js

这是我创建的代码沙盒演示

我想要的输出是：

最后一小时

• 内容1
• 内容2
• 内容3

今天

• 内容4

较老的

• 内容5

---

您的if-else逻辑无法为您提供正确的标题，您正在顶级的

else

上挤压它们。您可以使用

    let listHeader = "--";
    if (time === "none") {
        if (hour) {
            setTime("hour");
        } else if (day) {
            setTime("day");
        } else {
            setTime("older");
        }
    } else {
        if (hour) {
            listHeader = "Last Hour";
        } else if (day) {
            listHeader = "Today";
        } else {
            listHeader = "Older";
        }
    }

您没有对标题中的内容进行分组，因此返回标题的方式并不完全符合您的要求。下面的代码是一个关于如何做到这一点的示例

import React from "react";
import "./App.css";

const useLoadData = () => {
    const data = [
        {id: "01", content: "content 1", time: "3 seconds ago"},
        {id: "02", content: "content 2", time: "4 minutes ago"},
        {id: "03", content: "content 3", time: "35 minutes ago"},
        {id: "04", content: "content 4", time: "3 hours ago"},
        {id: "05", content: "content 5", time: "4 days ago"}
    ];
    //item 1 should get a heading "Last hour"
    //item 2 and item 3 should not get a heading. They are also under "Last hour"
    //item 4 should get a heading "Today"
    return data;
};

function findListHeader(item) {
    let timeC = item.time

    let listHeader = "--";
    let hour = false;
    let day = false;
    if (timeC.includes("second") || timeC.includes("minute")) {
        hour = true;
    }
    if (timeC.includes("hour")) {
        day = true;
    }
    if (hour) {
        listHeader = "Last Hour";
    } else if (day) {
        listHeader = "Today";
    } else {
        listHeader = "Older";
    }
    return {header: listHeader, item};
}

export default function App() {
    const var1 = useLoadData();

    let headers = ["Last Hour", "Today", "Older"]
    const itemHeaders = var1.map((itemP) => findListHeader(itemP));

    const var2 = headers.map((header) =>
        <CommentOne
            key={header}
            header={header}
            items={itemHeaders
                .filter(itemWithHeader => itemWithHeader.header === header)
                .map(itemWithHeader => itemWithHeader.item)
            }
        />);

    return <div> {var2} </div>;
}

function CommentOne({header, items}) {
    let content = items.map(item => <p>{item.content}</p>)
    return (
        <div className="App">
            <h1>{header}</h1>
            {content}
        </div>
    );
}

从“React”导入React；
导入“/App.css”；
const useLoadData=（）=>{
常数数据=[
{id:“01”，content:“content 1”，time:“3秒前”}，
{id:“02”，内容：“内容2”，时间：“4分钟前”}，
{id:“03”，内容：“内容3”，时间：“35分钟前”}，
{id:“04”，内容：“内容4”，时间：“3小时前”}，
{id:“05”，内容：“内容5”，时间：“4天前”}
];
//项目1应该有一个标题“最后一小时”
//第2项和第3项不应有标题。它们也位于“最后一小时”下
//项目4应该有一个标题“今天”
返回数据；
};
函数findListHeader（项）{
设timeC=item.time
让listHeader=“--”；
让小时=假；
让天=假；
如果（时间包括（“秒”）| |时间包括（“分钟”））{
小时=真；
}
如果（时间包括（“小时”））{
天=真；
}
若有（小时）{
listHeader=“最后一小时”；
}否则，如果（天）{
listHeader=“今天”；
}否则{
listHeader=“Older”；
}
返回{header:listHeader，item}；
}
导出默认函数App（）{
const var1=useLoadData（）；
let headers=[“最后一小时”、“今天”、“更老”]
const itemHeaders=var1.map（（itemP）=>findListHeader（itemP））；
const var2=headers.map（（header）=>
itemWithHeader.header==标题）
.map（itemWithHeader=>itemWithHeader.item）
}
/>);
返回{var2}；
}
函数CommentOne（{header，items}）{
让content=items.map（item=>{item.content}
）
返回(
{header}
{content}
);
}

太棒了。投票并尝试。它运行良好，但当它下面没有项目时会留下空标题。标题是先预定义的，因此如果它下面没有项目，则始终会有孤立的标题

let headers=[“最后一个小时”、“今天”、“以前”]

-这将查找属于这些header的项目。我会玩这个游戏，并根据你的答案发布更新的答案。