[JavaScript知识库]【react——小技巧】显示发布时间(XX秒前~XX分钟前)

示例：展示评论发布了多久

效果图：

基本思路：

组件实例会保存一个 timeString 状态，用于该评论显示发布了多久。通过接受props.Eachdata 里面的 createdTime 调用handleTime函数来渲染更新这个 ：计算当前时间和评论发布时间的时间差，如果已经发布 60 秒以上就显示分钟，否则就显示秒。

实现：

import React from 'react';

class CommentList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            timeString: '',
            data: []
        }
    }
    componentWillMount = () => {

    }
    handleTime = (time) => {
        const duration = (+Date.now() - time) / 1000
        console.log("duration:" + duration)

        return duration > 60
            ? `${Math.round(duration / 60)} 分钟前`
            : `${Math.round(Math.max(duration, 1))} 秒前`

    }
    render() {
        let { Eachdata } = this.props
        console.log(Eachdata)
        return (
            <div >
                <i style={{ color: '#38A3D2' }}> {Eachdata.username}</i> : {Eachdata.content}
                <p></p>
                <p style={{ textAlign: 'right', fontSize: '1px' }}>
                    {this.handleTime(Eachdata.createdTime)}
                </p>
                <hr />
            </div>

        );
    }
}

export default CommentList;