Question

我正在尝试创建一个滑雪应用程序作为响应，在这里我想为发生滑雪事件的日期设置一些日期。每当我使用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>
    ):
  }
}

要使用，只需将道具传递给组件：

(...)
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));

将来在React中创建日期对象

1 个答案: