在 React 中创建将来的日期对象

Question

我正在尝试在 react 中创建一个滑雪应用程序，我想在其中设置一些日期，用于滑雪赛事发生。每当我使用 date 对象并将将来的日期传入构造函数时，它只会显示

Nan/Nan/Nan

这是我的代码：

<SkiDayList
days={[
{
resorts: "Squaw Valley",
date: new Date("20/8/2018"),
powder: true,
backcountry: false
},
{
resorts: "Val Thorens",
date: new Date("5/10/2018"),
powder: true,
backcountry: true
},
{
resorts: "Val Desire",
date: new Date("5/10/2018"),
powder: false,
backcountry: true
},
{
resorts: "Squaw Valley",
date: new Date("1/2/2018"),
powder: true,
backcountry: false
}
]}
/>

我知道我可以只乘以日期或添加值，但是在构造函数中执行此操作是最佳做法，还是在组件外部创建值，然后将它们传入更好，我是新手反应，有些我不确定，什么是最佳实践。

编辑：

这是我的SkiDayRow.js组件

import React, { Component } from "react";
import { FaBeer } from "react-icons/fa";
import React, { Component } from "react";
import { FaBeer } from "react-icons/fa";
export const SkiDayRow = ({ resort, date, powder, backcountry }) => (
<tr>
<td>
{date.getMonth() + 1}/{date.getDate()}/{date.getFullYear()}
</td>
<td>{resort}</td>
<td>{powder ? <FaBeer /> : null}</td>
<td>{backcountry ? <FaBeer /> : null}</td>
</tr>
);

Answer 1

该对象非常基本，我不确定它是否需要是 React 组件。您可以使用带有 Intl.DateTimeFormat 的浏览器来设置日期格式。

如果你仍然想要一个组件，你可以做这样的事情。

日期组件：

export class DateComponent extends Component {
render() {
const {day, month, year} = this.props;
return (
<div>{month}/{day}/{year}</div>
):
}
}

要使用它，只需将 props 传递给组件：

(...)
render() {
return (
<DateComponent day={10} month={08} year={2018} />
);
}

编辑：添加了带有DateTimeFormat的代码段

const today = Date.now();
console.log(new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit'}).format(today));