我現在正在閱讀NextJS 教程，但有自己的想法。在 NextJS 示例中，自定義組件被稱為“Date”（/components/date.js），但在處理程序中沒有使用內置的 Date() 物件 - 所以 Date 組件名稱不會與任何東西沖突......它是唯一的到檔案。
但是在我的情況下，我的組件被稱為“日期”，就像在教程中一樣......但我也想在處理程序中在同一個檔案中使用 JS 內置的“日期物件”（所以我有 2 個日期存在）。似乎當我現在執行“new Date()”并嘗試僅呼叫內置的 Date 物件時......組件函式被呼叫，因此它會引發錯誤。
我知道我可以簡單地將我的日期重命名為 PublishedDate 和對“<PublishedDate>”的參考，然后它就可以正常作業了。
但我想知道出于學習目的，有沒有辦法讓我自己的組件重新使用內置名稱，即日期......有沒有有效的解決方法？這更像是一個好奇的問題，所以我可以正確地學習 JS/React/NextJS 并理解關于 JS/NextJS/React 內部的 WHY/WHY-NOT （否則我會更改名稱并完成它）。
日期.js
import { format, parse } from "date-fns"
export default function Date({ dateString }) {
const date = parse(dateString, "LLLL d, yyyy", new Date()) // call built-in Date()????
return <time dateTime={dateString}>{format(date, "LLLL d, yyyy")}</time>
}
拋出的錯誤：
import { format, parse } from "date-fns"
2 |
> 3 | export default function Date({ dateString }) {
| ^
4 | const date = parse(dateString, "LLLL d, yyyy", new Date())
5 | return <time dateTime={dateString}>{format(date, "LLLL d, yyyy")}</time>
6 | }
node_modules/next/dist/server/dev/next-dev-server.js:762
error - components/date.js (3:31) @ new Date
node_modules/next/dist/build/output/log.js:33
[31merror[39m - TypeError: Cannot destructure property 'dateString' of 'undefined' as it is undefined.
at new Date (/Users/cfork/projects/nextjs-blog/components/date.js:3:32)
at Date (/Users/cfork/projects/nextjs-blog/components/date.js:4:50)
uj5u.com熱心網友回復：
Datea 中的變數function Date(…) {…}將始終決議為該函式。您需要兩個不同的名稱來指代這兩個不同的事物。
一種選擇是匯出匿名函式宣告，洗掉名稱：
export default function({ dateString }) { // ^^ const date = parse(dateString, "LLLL d, yyyy", new Date()) return <time dateTime={dateString}>{format(date, "LLLL d, yyyy")}</time> }另一種選擇是不通過變數參考全域
Date，而是作為全域物件的屬性：export default function Date({ dateString }) { const date = parse(dateString, "LLLL d, yyyy", new global.Date()) // ^^^^^^^ return <time dateTime={dateString}>{format(date, "LLLL d, yyyy")}</time> }如果
.name函式的 很重要，請使用一些別名：const GlobalDate = Date; const DateComponent = function Date({ dateString }) { const date = parse(dateString, "LLLL d, yyyy", new GlobalDate()) return <time dateTime={dateString}>{format(date, "LLLL d, yyyy")}</time> } export { DateComponent as default }
您還可以將函式的名稱更改為其他名稱，例如DateComponent或什么都沒有，而無需更改匯入該函式的其他模塊中的名稱。匯出名為default，這對其他模塊很重要。
然而，將事物命名為與標準全域變數相同的名稱通常是一個壞主意，這會導致代碼混亂，所有開發人員都難以理解，包括您自己。
uj5u.com熱心網友回復：
Javascript 不允許您將內置函式用作自定義函式。您是否嘗試更改函式名稱并重試？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/513088.html