我有一个使用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 TARGETFOLLOW的进度。

因此,我需要映射过程来查看先前项目的状态,并在进行,回归或无更改的情况下呈现属性。我想需要设置等级并为每个状态指定一个值,然后在进行映射时进行查找?

最佳答案

如果将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>}
    )
}}

10-05 20:54
查看更多