我有一个使用React的标准映射元素。我的渲染如下:
render() {
const { timeLineData } = this.props;
const dateOrder = _.sortBy(timeLineData, function (o) { return new moment(o.createdDate) }).reverse();
return (
<div className="timeline-section">
{dateOrder.map((status, index) => (
<div key={index}>
<div className="timeline-badge"></div>
<div className="timeline-panel">
<p>{moment(status.createdDate).format('ll')}</p>
<h2 className="timeline-title"><strong>{status.status}</strong></h2>
<p>{progressed}?</p>
</div>
</div>
))}
</div>
);
}
我的名为
timeLineData
的数据按数据排序,并按该顺序映射。这是输出:timeLineData: [
0:{
createdDate: "2018-06-08T00:00:00"
status: "ON TARGET"}
1:{
createdDate: "2017-06-08T00:00:00"
status: "FOLLOW"}
2:{
createdDate: "2016-06-08T00:00:00"
status: "DO NOT FOLLOW"}
]
我的UI呈现按日期排序的时间轴,并显示进度状态。我希望用户界面上有一个附加字段,以通知用户自上一个日期以来是否已进步/或落后。示例中的“ 3状态”为[1:'ON TARGET',2:'FOLLOW',3:'DO NOT FOLLOW'],它们是按进度顺序排列的,例如
ON TARGET
是FOLLOW
的进度。因此,我需要映射过程来查看先前项目的状态,并在进行,回归或无更改的情况下呈现属性。我想需要设置等级并为每个状态指定一个值,然后在进行映射时进行查找?
最佳答案
如果将map
参数扩展为包括array
,则可以使用index
轻松检查上一项。以下只是您可以做的事情的基本概述。我提供了一些检查来检查您是否在数组的开头,因为您需要比较上一个项目。希望能帮助到你!
{dateOrder.map((status, index, array) => {
// Setup goes here
const previousStatus = array[index-1].status
// If previousStatus returns undefined, it can be used to check if there's a previous item to compare to.
return (
// The rest of your code
{(previousStatus && previousStatus === 'something')
? null
: <div>{"The thing that you want"}</div>}
)
}}