我如何使用下一個js對這個函式中的日期進行硬編碼-有解無憂

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 方法。存檔的方法是什么？

uj5u.com熱心網友回復：

我會將具有所需日期的日期物件傳遞給函式。

然后您可以使用以下語法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>

uj5u.com熱心網友回復：

要在 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>
)

您可以直接在 {} 中添加運算式，而不是使用變數

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/453939.html

標籤：反应功能日期下一个.js

上一篇：GitHub操作不會在github-actions(bot)創建的提交或PR上觸發

下一篇：串列中10的倍數