React JS获取当前日期

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (2744)

我想在我的componnent中输出当前日期。在控制台中我的代码可以工作,但React控制台说:

“bundle.js:14744 Uncaught RangeError:超出最大调用堆栈大小”

我的组件看起来像这样:

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) - 它将尝试创建组件类的实例。然后构造函数将尝试创建另一个实例,另一个实例和另一个实例......直到你用完堆栈空间并得到你看到的错误。

如果您想Date在课堂上使用,请尝试将您的课程命名为不同的类别,例如CalendarDateComponent

这样做的原因是JavaScript如何处理名称范围:每当您创建一个新的命名实体时,如果范围内已经有一个具有该名称的实体,该名称将停止引用前一个实体并开始引用您的新实体。因此,如果在名为Date的类中使用该名称Date,则该名称Date将引用该类,而不引用Date在类定义开始之前存在的任何已命名的对象。

用户回答回答于

选项1:如果你想制作一个通用的效用函数,那么你可以使用它

export function getCurrentDate(separator=''){

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

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

并通过导入它来使用它

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

选项2:或直接在类中定义和使用

getCurrentDate(separator=''){

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

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

扫码关注云+社区

领取腾讯云代金券