Question

我正在尝试获取当前月份的最后一个日期，以便可以准确显示日历日，因此我正在使用原始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: {…}, …}

双重编辑：

这是最小的可复制代码。

因此，在执行此操作时，我发现日期与默认日期有所不同日期结构例如当我出于某种原因导入Date组件时，将Mon May 27 2019 16:00:56等导入另一个对象。

文件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

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

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

Answer 2

您要以Date的形式导入组件，该组件将使Date全局对象蒙上阴影。这意味着在范围链中寻找Date时，JavaScript会使用您自定义的Date组件停在模块范围内，而不是上升到全局范围并找到Date全局。 / p>

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 />;
    }
}

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

哇，我发现了问题所在，它的简单性几乎让我想砸头。尽管我不确定具体细节，但似乎Date组件的命名干扰了正在实例化的date对象。所以我以某种方式假设，尽管我试图输出Date对象，但实际上是在输出Date组件，因此未知对象是带有相应网格日期的Date组件。如果任何人都可以弄清楚到底是怎么回事，我很想听听！另外，感谢您的所有答复！

Answer 5

是，在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)
}

可以在React.js中正常使用香草JS日期对象吗？

5 个答案: