React.js 能否正常使用 vanilla JS 日期对象？

Question

我正在尝试获取当月的最后一个日期，以便准确显示日历日，因此我使用的是 vanilla JS 日期对象。但是，从我通过控制台记录日期对象所看到的情况来看，它似乎是一个完全不同的对象，大概是一个反应对象。那么如何访问日期对象呢？

我尝试使用 toString 方法将日期对象解包为一个字符串，但该字符串不起作用，因为它变成了一个包含该对象的数组。

componentDidMount() {
    let date;
    date = new Date(2019, 11, 5);
    console.log(date)
}

我希望输出日期对象而不是未知对象

编辑：

未知对象在控制台中看起来像这样：

{$$typeof: Symbol(react.element), type: "div", key: null, ref: null, 
props: {…}, …}

双重编辑：

这是最少的可重现代码。

所以在执行此操作时我发现日期与默认日期不同日期结构前任。 2019 年 5 月 27 日星期一 16:00:56 等到我出于某种原因导入 Date 组件时的另一个对象。

文件App.js

import React from "react";
import Calendar from "./Calendar"

function App() {
    return (
        <div>
            <Calendar />
        </div>    

    )
}

export default App;

文件Calendar.js

import React from "react";
import Date from "./Date";    

class Calendar extends React.Component {
    constructor() {
        super();
    }

    componentDidMount() {
        let date = new Date();
        console.log(date)
    }

    render() {
        return (
            <Date /> 
        )
    }
}

export default Calendar;

文件Date.js

import React from "react";

function Date() {
    return (
        <div className="grid date">
            <p>1</p>
        </div>
    )
}

export default Date;

Answer 1

是日期在 React 中被正常使用。

使用日期的一种方法是 moment.js 库。所以你可以这样做：

componentDidMount() {
    let date;
    date = new Date(2019, 11, 5);
    let formatted_date = moment(date).format('MMMM Do, YYYY | h:mm a') 
    console.log(formatted_date)
}

Answer 2

JavaScript Date 对象具有 built-in 方法，可用于将日期格式化为字符串：

componentDidMount() {
    let date = new Date();
    console.log(date.toLocaleDateString()) // "5/27/2019"
}

Answer 3

import React, { Component } from "react";

export default class App extends Component {
  state = {
    date: ""
  };
  componentDidMount() {
    this.setState({
      date: new Date().toISOString().slice(0, 10)
    });
  }
  render() {
    return <div>{this.state.date}</div>;
  }
}

请记住，有很多方法可以实现这一目标。但根据 OP 的要求保持香草味。

Answer 4

哇，我找到了问题，它的简单性几乎让我想要 bash 我的头脑。虽然我不确定具体细节，但 Date 组件的命名似乎干扰了正在实例化的日期对象。所以我假设不知何故，虽然我试图输出 Date 对象，但我实际上输出的是 Date 组件，因此未知对象是 Date 组件及其对应的类网格日期。如果有人能弄清楚到底发生了什么，我很想听听！另外，谢谢大家的回复！

Answer 5

您正在导入一个组件作为 Date，它掩盖了 Date 全局对象。这意味着当在作用域链中查找 Date 时，JavaScript 将使用您的自定义 Date 组件停在模块作用域，而不是进入全局作用域并找到 Date 全球。

import Date from "./Date";

避免这种情况的一个简单方法就是更改导入日期组件的名称。

import React from 'react';
import DateComponent from './Date';   

class Calendar extends React.Component {
    componentDidMount() {
        // No ambiguity here anymore!
        const date = new Date();
        console.log(date);
    }

    render() {
        // Explicit component name.
        return <DateComponent />;
    }
}

为了避免在您的项目中出现任何歧义，我将 Date.jsx 文件也重命名为 DateComponent.jsx。

避免这种歧义的另一种方法是显式使用 window 全局对象属性。

import React from 'react';
import Date from './Date';   

class Calendar extends React.Component {
    componentDidMount() {
        // No ambiguity here anymore!
        const date = new window.Date();
        console.log(date);
    }

    render() {
        // Explicit component name.
        return <Date />;
    }
}

React.js 能否正常使用 vanilla JS 日期对象？

Can the vanilla JS date object be used normally in React.js?

javascript

calendar

date

reactjs