在字段

Question

下面是我用于呈现html内容的反应脚本。

import React, { Component, PropTypes } from 'react';
import cx from 'classnames';
import moment from 'moment';
import AppLink from '../containers/AppLinkContainer';
import { createReservationLink } from '../utils/link-creators';

export default class ReceiptListItem extends Component {

    static propTypes = {
        className: PropTypes.string,
        children: PropTypes.node,
        model: PropTypes.object
    };

    render() {
        const { className, children, model } = this.props;

        return (
            <AppLink to={createReservationLink({ reservationId: model.id })} className={cx('ReceiptListItem margin-top-3 padding-bottom-3 border-bottom-1', className)}>
                <figure className="ReceiptListItem-figure">
                    <img src={model.venue.thumb_image_url} alt={model.venue.about} />
                </figure>
                <div className="ReceiptListItem-content">
                    <div className="ReceiptListItem-contentInner">
                        <h3>{model.section.location}, {model.venue.name}</h3>
                        <p className="color-lightMuted">{moment(model.reservation_date).format('dddd MMMM Do')}</p>
                        <p className="color-lightMuted">Status : {model.reservation_status}</p>
                    </div>
                </div>
            </AppLink>
        );
    }

}

这将从后端显示列表。我想按照model.reservation_date的降序显示此列表。

任何指针都将受到赞赏。

Answer 1

首先，您需要将对象转换为数组。 Underscore在一行中做得非常漂亮：

var newArr = _(yourObject).toArray();

其次，使用lodash / sortBy对newArr进行排序。 sortBy后使用reverse来实现降序。

_.sortBy(newArr).reverse();