在 React js 中创建 Date 对象的有效方法

Posted 2023-03-23

【中文标题】在 React js 中创建 Date 对象的有效方法

【英文标题】：Efficient way to create a Date object in react js

【发布时间】：2021-11-12 17:40:36

【问题描述】：

我有以下为我创建组件的函数：

 renderComments(comments)
        const listcomments = comments.map((comment) => 
            return (
                <li key=comment.id>
                    <div className="row">
                        comment.comment
                    </div>
                    <div className="row">
                        -- comment.author , comment.date
                    </div>
                </li>
            );
        );
        return(
            <ul className = "list-unstyled">
                listcomments
            </ul>
        );

    

我的问题是 comment.date 的格式很奇怪：“2014-09-05T17:57:28.556094Z”

我想更改格式，但仅键入 Date.parse(comment.date) 不起作用（它无法将 Date.parse 识别为函数）。我在网上和 SO 中找到了如何通过声明一个新变量来创建一个 Date 对象，但我真的不能在 return 中这样做吗？

我是新手，所以如果有人可以帮助我以有效的方式将 comment.date 转换为正常格式，那就太好了。

【问题讨论】：

我得说提问有点吓人...我的问题刚刚发布，并且已经获得了密切的投票。我真的尽量让我的问题尽可能清楚，而不是问以前问过的东西。在我发布问题之前，我会收到一条警告，说我可能会被禁止提问......

您想要的日期格式是什么？听起来您可能对Intl.DateTimeFormat 感兴趣。我认为这个问题与 React 没有任何关系。如果是这样，那么也许您可以澄清什么是 React 特定的？

您的日期采用ISO_8601 格式，这是javascript Date 对象无需解析即可识别的标准。所以你可以简单地new Date('2014-09-05T17:57:28.556094Z')，然后按你的意愿格式化。

@jsejcksn 这里的问题是我需要解析返回中的日期，因为我尝试创建一个组件。如果它是与反应无关的普通 JS 代码，我就不会遇到这个问题。因此，除非我遗漏了什么，否则这是一个与反应相关的问题。

在返回中很好，但正如下面的答案所述，返回是用 JSX 编写的，而不是普通的 javascript。因此，任何 javascript 都需要用大括号括起来。您可以尝试-- comment.author, new Date(comment.date).toLocaleDateString() 并阅读更多关于toLocaleDateString()

【参考方案1】：

Date.parse确实是一个函数。

console.log(Date.parse);

您需要做的就是将正确类型的参数传递给它。您当前的代码

Date.parse(comment.date)

是无效的语法，因为对象需要键值对。将仅注释日期字符串传递给它，它会起作用 - 但是，Date.parse 返回一个时间戳编号，而不是 Date 对象。如果您想要一个 Date 对象，请使用new Date，然后您可以使用various Date methods 从中提取您想要的内容。

const d = new Date("2014-09-05T17:57:28.556094Z");
console.log(d.getMinutes());

【讨论】：

先谢谢你的回答，我试试。但我承认我不太明白，comment.date 不应该只是评论日期字符串吗？

似乎当我在返回函数中时，Date 只是被翻译为普通字符串......对于“const”关键字和许多其他关键字也是如此。看来我必须在返回之外解析日期，这会使事情复杂化。

comment.date 是从名为comment 的对象中提取date 属性的正确纯语法。 comment.date 在 JavaScript 中是无效的语法。但是 JSX 使用括号 来分隔 JavaScript 表达式到 JSX 标记中的插值。

嗯，但不幸的是我不能让 jsx 将 Date.parse 作为一个函数插入到 return 语句中......它将它作为普通字符串读取，这就是为什么 const d = new Date(" 2014-09-05T17:57:28.556094Z");不适合我:(

如果你想分配一个标识符并在返回之前使用这个值做一些事情，你还需要一个函数，或者是一个预先命名的函数，或者一个 IIFE。 const parseDateString = (dateStr) => /* do stuff and return */ 然后在 JSX 中你可以做 parseDateString(comment.date)