javascript - vanilla JS 的日期对象在 React.js 中可以正常使用吗？

Question

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

我曾尝试使用 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;    

文件日期.js

import React from "react";

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

export default Date;

Answer 1

您正在导入一个组件作为 Date，这会掩盖 Date 全局对象。这意味着当在作用域链中查找 Date 时，JavaScript 将在自定义 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 />;
    }
}