Можно ли нормально использовать объект даты vanilla JS в React.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: {…}, …}

ДВОЙНОЕ РЕДАКТИРОВАНИЕ:

Вот минимальный воспроизводимый код.

Так что, делая это, я понял, что дата меняется по умолчанию структура даты Ex. Пн 27 мая 2019 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

Вы импортируете компонент как Date, который затеняет глобальный объект Date. Это означает, что при поиске Date в цепочке областей действия JavaScript остановится на области модуля с вашим пользовательским компонентом Date вместо того, чтобы перейти к глобальной области действия и найти Date global.

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 2

Объект JavaScript Дата имеет встроенные методы, которые можно использовать для форматирования даты в строку:

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

Answer 3

Ух ты, я понял проблему, и ее простота почти заставляет меня хотеть ударить меня головой. Хотя я не уверен в специфике, похоже, что наименование компонента Date вмешивалось в объект даты, который создается. Поэтому я предполагаю, что каким-то образом, хотя я пытался вывести объект Date, я фактически выводил компонент Date, поэтому неизвестный объект был компонентом Date с соответствующей датой сетки классов. Если кто-нибудь сможет прояснить, что происходит в мрачной песчанке, я бы с удовольствием это услышал! Также, спасибо за все ваши ответы!

Answer 4

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 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)
}