如何在React中输出JavaScript的new Date()？解决渲染日期报错

嘿，这个问题我之前开发的时候也踩过坑！你遇到的报错核心原因很明确：React不能直接把JavaScript对象作为子元素渲染——new Date()返回的是一个Date对象，而React只认字符串、数字、React元素这些原始值或合法渲染节点，自然会抛出那个提示错误。

几个简单有效的解决方法： #

• 直接转成字符串：用toString()方法把Date对象转换成字符串，这是最直接的方式：

  const currentDate = new Date().toString();
  

• 输出本地化友好格式：如果想要更易读的日期时间格式（比如2024/5/20 14:30:00），可以用toLocaleString()，还能传参数自定义样式：

  // 默认本地化格式
  const currentDate = new Date().toLocaleString();
  // 自定义格式示例：输出 "May 20, 2024, 2:30:00 PM"
  // const currentDate = new Date().toLocaleString('en-US', { 
  //   year: 'numeric', month: 'long', day: 'numeric',
  //   hour: '2-digit', minute: '2-digit', second: '2-digit' 
  // });
  

• 直接在JSX中转换：如果不需要复用这个日期变量，也可以省去变量声明，直接在渲染时完成转换：

  <h1>All activity is recorded. {new Date().toString()}</h1>
  

修正后的完整代码示例： #

import React, { Component } from 'react';
import './ActivityWarningText.css';

class ActivityWarningText extends Component {
  render() {
    // 这里选用本地化格式，输出更友好的日期时间
    const currentDate = new Date().toLocaleString();
    
    return(
      <div>
        <h1>All activity is recorded. {currentDate}</h1>
      </div>
    )
  }
}

export default ActivityWarningText;

本质上就是把Date对象转换成React能识别渲染的原始值，这样就不会再触发那个报错啦！

内容的提问来源于stack exchange，提问作者TheBlackBenzKid