Можно ли нормально использовать объект даты vanilla JS в React.js?
Я пытаюсь получить последнюю дату текущего месяца, чтобы точно отображать календарные дни, поэтому я использую объект даты vanilla JS. Однако из того, что я видел в консоли, регистрирующей объект даты, кажется, что это совершенно другой объект, предположительно объект реакции. Итак, как я могу получить доступ к объекту даты?
Я попытался использовать метод toString, чтобы развернуть объект даты в строку, которая не сработала, потому что она превращается в массив с объектом в нем.
componentDidMount() {
let date;
date = new Date(2019, 11, 5);
console.info(date)
}
Я ожидаю, что объект даты будет выведен вместо неизвестного объекта
Обновлено:
Неизвестный объект выглядит в консоли так:
{$$typeof: Symbol(react.element), type: "div", key: null, ref: null,
props: {…}, …}
ДВОЙНОЕ РЕДАКТИРОВАНИЕ:
Вот минимальный воспроизводимый код.
Итак, делая это, я понял, что дата меняется по умолчанию структура даты Бывший. Пн, 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.info(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;
Похоже, что есть еще что-то с именем date, которое регистрируется, и его было бы легче обнаружить с помощью минимальный воспроизводимый пример.
Код готов!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info(formatted_date)
}
moment отлично - будьте осторожны с такими фразами, как «лучший способ», потому что это может быть не в случае с ОП. moment также имеет значительную стоимость с точки зрения веса библиотеки, что следует учитывать.
Объект JavaScript Дата имеет встроенные методы, которые можно использовать для преобразования даты в строку:
componentDidMount() {
let date = new Date();
console.info(date.toLocaleDateString()) // "5/27/2019"
}
Да, другое дело, что когда я использую метод даты, я всегда получаю сообщение об ошибке, говорящее, что метод не существует!?
@Elijah.S, пожалуйста, включите минимальный воспроизводимый пример в свой вопрос.
Обязательно сделайте это сейчас!
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.
Вау, я понял проблему, и ее простота почти заставляет меня хотеть разбить себе голову. Хотя я не уверен в специфике, кажется, что наименование компонента Date мешало объекту даты, который создается. Итак, я предполагаю, что каким-то образом, хотя я пытался вывести объект Date, я фактически выводил компонент Date, поэтому неизвестный объект является компонентом Date с соответствующей датой сетки классов. Если кто-то может прояснить, что происходит в мельчайших подробностях, я хотел бы это услышать! Кроме того, спасибо за все ваши ответы!
Я написал ответ, который подтверждает это и показывает рабочий пример.
Вы импортируете компонент как 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.info(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.info(date);
}
render() {
// Explicit component name.
return <Date />;
}
}
В чем конкретно проблема? Что вы подразумеваете под "неизвестным объектом"?