Question

React JS 获取当前日期

2017-05-02

350114

javascript reactjs

我想在我的组件中输出当前日期。在控制台中我的代码可以运行，但 React 控制台显示：

bundle.js:14744 Uncaught RangeError: Maximum call stack size exceeded

我的组件如下所示：

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

Answer 1

您的问题在于您将组件类命名为 Date 。当您在类中调用 new Date() 时，它不会创建您期望它创建的 Date 实例（很可能是此 Date ）- 它将尝试创建您的组件类的实例。然后构造函数将尝试创建另一个实例，然后是另一个实例，然后是另一个实例……直到您用尽堆栈空间并收到您看到的错误。

如果您想在类中使用 Date ，请尝试将类命名为其他名称，例如 Calendar 或 DateComponent 。

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

Answer 2

选项 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 {getCurrentDate} from './utils'
console.log(getCurrentDate())

选项 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}`
}

Answer 3

完整日期和时间：

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

仅提取月份（当前）：

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

仅提取日期：

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

仅提取年份：

{new Date().getFullYear()}