reactjs - React:根据日期顺序渲染
问题描述
我有一个呈现组件并将其插入时间轴的表单,但我不知道如何让它按时间顺序呈现新的提交,以便它以正确的顺序插入。
这是我迄今为止一直在尝试的。
render() {
return (
<div className="timeline-container">
<ul>
{this.state.activities
.sort((a, b) => a.date > b.date)
.map((activity, i) => (
<Activity
key={i}
data={activity}
handleDelete={this.handleDelete}
/>
))}
</ul>
</div>
);
}
这是 Activity 组件:
<li>
<span></span>
<div className="activity-title">{this.state.activity.title}</div>
<div className="activity-info">{this.state.activity.description}</div>
<div className="activity-location">{this.state.activity.location}</div>
<div className="activity-date">{this.state.activity.date.slice(0, 10)}</div>
<button onClick={this.handleDelete.bind(this, this.state.activity.id)}>
Delete
</button>
</li>;
目前,提交表单时它仍会自动呈现,但不会对它们进行排序。
解决方案
您应该使用new Date(date).getTime()
方法进行比较和排序。最好的方法是:
.sort(
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
)
使用我的虚拟数据,我得到了这个:
我添加了更多条目,这是完整的代码:
const Activity = props => (
<li>
{props.data.title} (#{props.data.id}) ({props.data.date.split("T")[0]})
</li>
);
class App extends React.Component {
state = {
activities: [
{
id: 1,
trip_id: 5,
title: "Activity 1",
description: "Description 1",
location: "Location 1",
date: "2019-07-03T23:00:00.000Z",
pending: null,
created_at: "2019-07-28T17:49:40.269Z",
updated_at: "2019-07-28T17:49:40.269Z"
},
{
id: 2,
trip_id: 5,
title: "Activity 2",
description: "Description 1",
location: "Location 1",
date: "2019-07-05T23:00:00.000Z",
pending: null,
created_at: "2019-07-28T17:49:40.269Z",
updated_at: "2019-07-28T17:49:40.269Z"
},
{
id: 3,
trip_id: 5,
title: "Activity 3",
description: "Description 1",
location: "Location 1",
date: "2019-07-02T23:00:00.000Z",
pending: null,
created_at: "2019-07-28T17:49:40.269Z",
updated_at: "2019-07-28T17:49:40.269Z"
}
]
};
render() {
return (
<div className="timeline-container">
<ul>
{this.state.activities
.sort(
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
)
.map((activity, i) => (
<Activity
key={i}
data={activity}
handleDelete={this.handleDelete}
/>
))}
</ul>
</div>
);
}
}
在此示例中,我使用了多个活动来向您展示它们是如何按日期排序的。
演示:代码沙盒
推荐阅读
- python - 自动化无根安卓智能手机
- javascript - 使用从 ajax 请求返回的数据更新输入“值”属性...传入 [object, Object]。- Django/Python
- c - atomic operator++ 和 atomic_fetch_add_explicit 的区别
- python - 如何在布尔变量上使用 .trace?
- swift - 如何更快地显示来自 Firebase 的数据?
- r - 如何让R函数返回多个参数值
- python-3.x - 从 PyQt4 迁移到 PyQt5
- css - 在 RMarkdown 文档中为 fontcolor 创建与输出无关的标记
- java - 我有一个使用 H.264 (MPEG-4) 压缩记录视频的代码,但我想使用 MJPEG
- python - 如何访问/处理 TensorFlow 数据集中的内容?