반응 JS 현재 날짜 가져오기

반응 JS 현재 날짜 가져오기

구성 요소에 현재 날짜를 출력하고 싶습니다.콘솔에서는 코드가 작동하지만 React 콘솔에서는 다음과 같이 표시됩니다.

"bundle.js: 14744 Uncaught Range Error: 최대 콜스택 크기를 초과했습니다."

내 컴포넌트는 다음과 같습니다.

import React from 'react';
var FontAwesome = require('react-fontawesome');

export class Date extends React.Component {
    constructor() {
        super();

        var today = new Date(),
            date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();

        this.state = {
            date: date
        };
    }

    render() {
        return (
            <div className='date'>
                <FontAwesome name='calendar' />{this.state.date}
            </div>
        );
    }
}

네, 제가 초보자인 건 알지만 누가 좀 도와주실 수 있을 것 같아요.나는 몇 시간 동안 구글을 검색했다 -

아주 많이!

컴포넌트 클래스에 이름을 붙이는 것이 문제입니다.Date전화할 때new Date()당신의 클래스 내에서는, 그 인스톨이 생성되지 않습니다.Date생성될 것으로 예상되며(이것일 가능성이 높습니다), 컴포넌트 클래스의 인스턴스를 생성하려고 합니다.그런 다음 생성자는 다른 인스턴스, 다른 인스턴스 및 다른 인스턴스를 생성하려고 시도합니다.스택 영역이 부족하여 에러가 표시될 때까지.

사용하고 싶은 경우Date당신의 학급 내에서, 당신의 학급에 다음과 같은 다른 이름을 지어보세요.Calendar또는DateComponent.

그 이유는 JavaScript가 이름 범위를 처리하는 방식입니다.해당 이름을 가진 엔티티가 이미 범위에 있는 경우 새로 이름을 붙인 엔티티를 작성할 때마다 해당 이름은 이전 엔티티에 대한 참조를 중지하고 새 엔티티에 대한 참조를 시작합니다.그래서 그 이름을 쓰면Date라는 반 내에서Date, 이름Date이 클래스는 참조되며 이름이 붙은 오브젝트는 참조되지 않습니다.Date클래스 정의가 시작되기 전에 존재했습니다.

옵션 1: 공통 유틸리티 기능을 만들고 싶다면 이 기능을 사용할 수 있습니다.

export function getCurrentDate(separator=''){

let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth() + 1;
let year = newDate.getFullYear();

return `${year}${separator}${month<10?`0${month}`:`${month}`}${separator}${date}`
}

를 Import 하는 것만으로 사용할 수 있습니다.

import {getCurrentDate} from './utils'
console.log(getCurrentDate())

OPTION 2: 또는 클래스에서 직접 정의하여 사용

getCurrentDate(separator=''){

let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth() + 1;
let year = newDate.getFullYear();

return `${year}${separator}${month<10?`0${month}`:`${month}`}${separator}${date}`
}

전체 날짜 및 시간:

{new Date().toLocaleString() + ""}

월만 추출(현재):

{new Date().toLocaleString("en-US", { month: "long" })}

하루만 추출:

{new Date().toLocaleString("en-US", { day : '2-digit'})}

추출만 년:

{new Date().getFullYear()}

반응 순간 패키지를 사용할 수 있습니다.

-> https://www.npmjs.com/package/react-moment

파일에 다음 행을 입력합니다.

import moment from "moment";

date_create: moment().format("DD-MM-YYYY hh:mm:ss")

심플한 솔루션은

{new Date().toLocaleString() + ''}

나의 작은 발전.

getCurrentDate(separator=''){

let newDate = new Date()
let date_raw = newDate.getDate();
let month_raw = newDate.getMonth() + 1;
let year = newDate.getFullYear();
var date, month
  
if (date_raw<10)  {  date ="0"+date_raw.toString()} else {  date =date_raw.toString()}
if (month_raw<10)  {  month ="0"+month_raw.toString()} else {  month =month_raw.toString()}


return (
    <div>{year}{separator}{month}{separator}{date}</div>
            );
}

언급URL : https://stackoverflow.com/questions/43744312/react-js-get-current-date