将 Javascript DateTime 库应用于持续时间的 React 组件

Question

我尽可能多地查看了将持续时间库集成到 React 中的 SO，但在 React 上下文中找不到具体示例。抱歉，如果这是一个新手问题，我一直在通过 momentjs 问题和其他各种方式研究和搜索这个问题。

我正在尝试找出如何使用 humanize-duration or 在 React 中为 JS 库调用持续时间方法。例如，我尝试在我的组件中调用 humanize-duration：

import React, { Fragment } from 'react'
import NumberFormat from 'react-number-format'
import humanizeDuration from 'humanize-duration';    


export default function ProductDetails({ time_inventoried, total_time_staged  }) {
    return <tr>      
      <td>humanizeDuration({time_inventoried})</td> //860 days 03:34:17.564021 before format
      <td>humanizeDuration({total_time_staged})</td>  // # of seconds  before format
  </tr>
}

如上所示，尝试使用典型指令调用它时，只会在括号中呈现未处理的结果。在 React 中渲染它的正确方法是什么？

Answer 1

你试过把你的js语句放在花括号里{}

import React, { Fragment } from 'react'
import NumberFormat from 'react-number-format'
import humanizeDuration from 'humanize-duration';    


export default function ProductDetails({ time_inventoried, total_time_staged  }) {
    return <tr>      
      <td>{humanizeDuration(time_inventoried)}</td> //860 days 03:34:17.564021 before format
      <td>{humanizeDuration(total_time_staged)}</td>  // # of seconds  before format
  </tr>
}

将 Javascript DateTime 库应用于持续时间的 React 组件

Applying Javascript DateTime library to React component for durations

datetime

duration

momentjs

ecmascript-6

reactjs