React 中的 new Date().getFullYear()

Question

我正在尝试在页脚中显示当前年份并试图弄清楚如何获得当前年份的 React 方式？ 有没有办法使用 new Date().getFullYear()？

Answer 1

您需要将纯 JavaScript 放在{} 。 这对我有用：

class HelloMessage extends React.Component {
  render() {
    return <div>{(new Date().getFullYear())}</div>;
  }
}

ReactDOM.render(<HelloMessage />, mountNode);

编译后的版本是：

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      new Date().getFullYear()
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, null), mountNode);

Answer 2

您可以做的一件事是在渲染函数之外创建一个获取年份的函数：

getYear() {
    return new Date().getFullYear();
}

然后将其插入到您想要的渲染函数中。 例如，您可以将它放在<span>标签中以在页脚中获取当前年份：

<span>
   © {this.getYear()} Your Name
</span>

这将产生：

© 2018 Your Name

使用 render 方法之外的命名良好的函数，您可以快速找到该函数的作用，并且如果您想更改版权年份（例如© 1996 - 2018等），您可以在将来对其进行修改.

Answer 3

你可以只添加一个变量const today = new Date(); 然后在您想要放置的位置添加<p> {today.getFullYear()} </p>以提取当前年份。

Answer 4

使用钩子的例子

你不能使用 react useState 来改变变量 date 的值以在 DOM 中打印和 useEffect 来显示 DOM READy

在 jsx 中调用 {date} 后打印加载的文档

import React, {useState, useEffect} from 'react';

export default function Footer() {

    const [date , setDate] = useState();

    const getYear = () =>  setDate(new Date().getFullYear())


    useEffect(() => {
        getYear();
    }, [])
  return (
    <>
     &copy; Rogerio Orioli - {date}
    </>
  );
}

Answer 5

您可以将此代码复制并粘贴到页脚组件中：

import React from 'react';

const Footer = () => {
  const today = new Date();
  const year = today.getFullYear();
  return (
    <footer>
      <p>
        <small>Copywrite © {year} Name</small>
      </p>
    </footer>
  );
};

export default Footer;

Answer 6

我知道这有点旧，但它有一些观点。

这是显示起始年份和当前年份（如果不同）的最少代码，这可能非常方便。

function DisplayCopyright() {
    const startYear = 2021
    const currentYear = new Date().getFullYear()

    return (
        <> copyright {startYear === currentYear ? date : startYear + "-" + currentYear} </>
    )
}

export default DisplayCopyright

Answer 7

我使用一个答案并修改它以使其适用于 react js：

import React, { Component } from "react";

export const Footer = () => {
let getYear = () => {
    let currentYear = new Date().getFullYear();
    return currentYear;
};
return (
    <div>
        <footer className="py-5 bg-dark">
            <div className="container-fluid">
                <p className="m-0 text-center text-white">
                    Copyright &copy;
                    <span> {getYear()} YourName </span>
                    <br /> Made with ❤️ by YourName 🔥
                </p>
            </div>
        </footer>
    </div>
);
};

Answer 8

如果要计算组件挂载的当前年份， useState就足够了：

import React, {useState} from 'react';

export default function Footer() {
  const [currentYear] = useState(() =>  new Date().getFullYear());
  return (
    <>
     &copy; MyWebsite - {currentYear}
    </>
  );
}

Answer 9

function Footer(params) {
 
  const today = new Date()
  const year = today.getFullYear();
  
    return(
        <>
         <footer className="footer">
            <div className="d-sm-flex justify-content-center justify-content-sm-between">
              <span className="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com {year}</span>
              <span className="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard template</a> from Bootstrapdash.com</span>
            </div>
          </footer>

        </>
    )
}
export default Footer;