Question

我试图显示当前年份的页脚并试图找出如何获得当前年份的React方式？有没有办法使用新的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>

哪会产生：

使用渲染方法之外的一个名称很好的函数，您可以快速找到该函数的功能，并且如果您想要更改版权年份，例如{{1}，您将来可以对其进行修改。等等。

Answer 3

您只需添加一个变量const today = new Date();，然后添加<p> {today.getFullYear()} </p>即可放置当前年份。

Answer 4

使用钩子的示例

您不能使用react useState更改变量日期的值以在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

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

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

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

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

export default DisplayCopyright

Answer 6

我使用一个答案并对其进行修改以使其适用于 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>
);
};

React中的新Date（）。getFullYear（）

6 个答案:

使用钩子的示例