React中Moment组件使用ago属性无法显示正确相对时间的问题

问题出在你同时使用了format和ago属性——format会强制组件输出你指定的日期格式，直接覆盖了ago的相对时间生成逻辑，所以才会显示02/12 09:30而不是预期的“XX分钟前”。

修复步骤： #

• 移除format属性，只保留ago和interval，组件就会自动渲染相对时间：

<Moment interval="1000" ago>{lastUpdatedOnTime}</Moment>

• 另外你转换UTC时间的代码可以简化，moment.utc直接支持ISO格式字符串，不用额外套一层new Date：

const lastUpdatedOnTime = moment.utc("2023-12-02T21:00:05.696Z");

进阶需求：同时显示相对时间和具体日期 #

如果需要在展示相对时间的同时，让用户能看到具体时间，可以用title属性实现hover显示：

<span title={moment(lastUpdatedOnTime).format("DD/MM hh:mm")}>
  <Moment interval="1000" ago>{lastUpdatedOnTime}</Moment>
</span>

内容的提问来源于stack exchange，提问作者Emil Tsvetanov