我如何使用 next js 在此函数中硬编码日期

Question

export default function BudgetDate() {
  const month = month.toLocaleString("de-de", { month: "long" });
  const year = year.getFullYear();
  const day = day.toLocaleString("de-de", { day: "2-digit" });

  return (
    <div className="expense-date">
      <div className="expense-date__month"></div>
      <div className="expense-date__year"></div>
      <div className="expense-date__day"></div>
    </div>
  );
}

这是一个名为 BudgetDate 的 im 编码组件。它将嵌套在另一个名为 BudgetBar 的组件中。

import styles from "./BudgetBar.module.css";

export default function Budgetbar() {
  return (
    <div className={styles.wrapperDiv}>
      <button className={styles.basicBar}>
        <div className={styles.date}>
          <div>Februar</div>
          <div>2022</div>
          <div>05</div>
        </div>
        <div className={styles.item}>Sony Playstation</div>
        <div className={styles.amount}>500 Euro</div>
      </button>
    </div>
  );
}

我的目标是取代

<div className={styles.date}>
          <div>Februar</div>
          <div>2022</div>
          <div>05</div>
        </div>

简单地

<BudgetDate />

为了使用正确格式的日期。

但是，我的问题是，我不知道如何在 BudgetDate 组件中编写代码。我想在 BudgetDate 内的 div 之间对年份、日期和月份进行硬编码，并使用 .toLocaleString 方法。有什么方法可以存档？

Answer 1

我会将带有所需日期的 date object 传递给函数。

然后您可以使用 :

将 toLocaleString 粘贴到 jsx 中

const { useState } = React;

function BudgetDate(date) {
  return (
    <div className="expense-date">
      <div className="expense-date__month">{date.toLocaleString("de-de", { month: "long" })}</div>
      <div className="expense-date__year">{date.getFullYear()}</div>
      <div className="expense-date__day">{date.toLocaleString("de-de", { day: "2-digit" })}</div>
    </div>
  );
}

const Example = () => {
  
    // Today
    const date = new Date();
    
    // Hardcoded 
    //const date = new Date('2020-01-01');
    
    return (  
        <div>
            {BudgetDate(date)}
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

要在 JSX 中包含变量，您需要在标签中使用 { variable_name }。

const month = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)).toLocaleString("de-de", { month: "long" });
const year = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)).getFullYear();
const day = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)).toLocaleString("de-de", { day: "2-digit" });
return (
      <div className="expense-date">
      <div className="expense-date__month">{month}</div>
      <div className="expense-date__year">{year}</div>
      <div className="expense-date__day">{day}</div>
    </div>
)

您可以直接在 {} 中添加表达式，而不是使用变量

我如何使用 next js 在此函数中硬编码日期

How can i hardcode the date in this function using next js

date

function

reactjs

next.js