reactjs - 如何让 JavaScript date.getFullYear() 进入 React

Question

我目前正在构建一个基于 React 的应用程序，并且我正在尝试合并简单的版权年份，因此它不会被硬编码。我觉得我错过了一些非常简单的东西，但它说明了我的名字类中的函数未定义 - 当它明确定义时。

我假设日期功能也是正确的 - 所以如果有什么问题，请告诉我。

这是我的代码：

import React from 'react';

class Footer extends React.Component {

  year() {
    document.getElementById('copyright-year').innerHTML = ("Jon Nicholson " + new Date().getFullYear())
  }

  render() {

    return (

      <div className="footer-section">
        <div className="footer-container">
          <div className="footer-site-links">
            <a href="about">about</a>
            <a href="newsletter">newsletter</a>
            <a href="product">product page</a>
          </div>

          <div className="footer-copyright">
            <i class="far fa-copyright"></i>
            <p id="copyright-year">{year}</p>
          </div>
        </div>
      </div>

    )
  }
}

export default Footer;

和错误信息：

./src/Components/Footer.js Line 23:37: 'year' is not defined no-undef

搜索关键字以了解有关每个错误的更多信息。

希望这真的很明显，但我一直在挠头，无法弄清楚我做错了什么？

谢谢！

标签： reactjs

Answer 1

一种方法是使用 year 状态变量并将其添加到代码中

import React from 'react';

class Footer extends React.Component {

       constructor(){
       this.state = {
           year : new Date().getFullYear()
       }
     }

render() {

  return (

      <div className="footer-section">
        <div className="footer-container">
          <div className="footer-site-links">
            <a href="about">about</a>
            <a href="newsletter">newsletter</a>
            <a href="product">product page</a>
          </div>

          <div className="footer-copyright">
            <i class="far fa-copyright"></i>
            <p id="copyright-year">{"Jon Nicholson " + this.state.year}</p>
          </div>
        </div>
      </div>

    )
  }
}