使用 React Moment 在 React Semantic UI 中显示数据库中的时间

Question

时间戳字符串存储在数据库中，如下所示：

startsAt: 1535705100000
endsAt: 1535708100000

目前有一个 const endTime 应该将时间戳字符串转换为人类可读的，以及像这样的 TimeInput 字段：

从“反应时刻”导入时刻； ..

  const endTime = (
    <Moment unix format="HH:mm">
      {endsAt / 1000}
    </Moment>
  );

.

..
import { TimeInput } from "semantic-ui-calendar-react";

      <TimeInput            
        ..
        name="startsAt"
        placeholder="00:00"
        value={endTime}
        ..
      />

声明const endTime 后，渲染到输入字段的是[object Object]。

问题是——我是否可以用来创建一个常量以在 TimeInput 组件中显示为一个值。

OR/ALSO - 在这种情况下，从字符串呈现可读时间的最佳方法是什么？所需输出：H:mm

非常感谢！

Answer 1

看看你的控制台。我的猜测是，您的 TimeInput 组件上的 value 道具可能还会出现道具类型错误。它正在渲染 [object Object] 因为您在那里传递的是 React 组件而不是字符串。所以看起来value 不接受 React 组件作为输入。

您正在使用react-moment 作为您的包来转换时间。但是在转换显示的时间时，它总是会在您的字符串周围呈现某种 html 标记。您应该改为尝试使用moment。主库将返回一个实际的字符串，您可以直接将其传递给您的value。