不行。 我不知道具體的技術原因，但是這是不可能的。 我在使用SWR和特別是useSWR hook時碰到了這個問題。 const ({ data } = useSWR(`/api/user`, fetcher) 我想在使用者登錄時只從API中檢索一些數據，並且我想“好的，我可以這樣做”: let data if (loggedIn) { ;({ data } = useSWR(`/api/user`, fetcher) } 但是..不行。 React會在控制台中報錯，可能會顯示如下的錯誤訊息： 警告: React檢測到Hooks調用的順序在Course中發生了變化。如果不修正，這將導致錯誤和bug。 解決方案取決於使用的hook。在這種情況下，useSWR hook提供了一個非常快速和高效的解決方案，因為我可以將API端點替換為null以避免加載數據： const ({ data } = useSWR(loggedIn ? `/api/user` : null, fetcher) 我將條件語句放在應用hook的內部，這使它對我起作用了。
如何在深色或亮色模式下顯示不同的網頁圖示 我在 Mac 上設置了自動切換深色和亮色模式的功能。 當我開始建立一個新的網站時，有一段時間我意識到我把一個白色圖片設置為網頁圖示，而在亮色模式下它幾乎是看不見的！ 所以我開始探索在深色模式中添加一個網頁圖示以及在亮色模式中添加不同的圖示的可能方法。 結果發現（目前）無法對 PNG/JPG 位圖圖片進行這樣的操作，但我們可以使用 SVG 向量圖像的技巧來實現。 我們可以在 SVG 圖像中嵌入 CSS。 如果圖像足夠簡單以至於我們可以識別一個顏色並在深色模式下更改它，那麼我們可以為這 2 種模式設置不同的顏色。 這是我用作網頁圖示的 SVG 代碼： <svg width="37" height="45" viewBox="0 0 37 45" fill="none" xmlns="http://www.w3.org/2000/svg" > <style> path { fill: #ccc; } @media (prefers-color-scheme: dark) { path { fill: #fff; } } </style> <path fill-rule="evenodd" clip-rule="evenodd" d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22....
在與我的編程訓練班學生一起工作時，我幫助了其中一些人解決了一個問題：時間。 特別是，有一件事起初可能並不明顯。 當您存取 DOM 元素的值並將其存儲到變量中時，當 DOM 元素更改時，該變量將 不會 更新為新值。 假設您在表單中有一個輸入字段 <input id="temperature">，並以以下方式獲取其值： const temperature = document.querySelector('input#temperature').value temperature 變數會獲取瀏覽器在執行此語句時輸入字段的狀態，並且值將永遠保持不變。 這就是為什麼您不能像這樣操作： const temperature = document.querySelector('input#temperature').value document.querySelector('form') .addEventListener('submit', event => { //將溫度值發送到服務器 }) 而您需要在提交表單時訪問溫度值： document.querySelector('form') .addEventListener('submit', event => { const temperature = document.querySelector('input#temperature').value //將溫度值發送到服務器 }) 或者，您可以將輸入字段的 引用 存儲在變量中，然後在提交表單時使用它來訪問其值： const temperatureElement = document.querySelector('input#temperature') document.querySelector('form') .addEventListener('submit', event => { const temperature = temperatureElement.value //將溫度值發送到服務器 })
有時候我覺得自己屬於一個小而特殊的領域。 我生活在一個由使用數位設備（桌機、筆記型電腦、智慧型手機或平板電腦）創造價值並在數位網絡中傳播的人所組成的生態系統中。 我透過部落格文章和線上課程幫助軟體開發者在他們的工作上更上一層樓。那就是我做的。 我這個領域中的其他人創作視頻、寫電子書，他們還有付費的電子通訊、製作軟體產品然後以一次性或訂閱的方式出售。 在現實生活中，我不認識任何做和我一樣的工作的人。可悲的是如此。我不生活在這種常見的生態系統中。我知道我可以飛到某些時髦的數字遊牧地方找到他們，但我並不傾向這樣做。但是我通過互聯網認識了很多人。我讀他們寫的東西。我看他們的視頻。我在播客訪談中聽他們的聲音。 這些人工作獨立。他們沒有任何人要向報告。有時候他們和其他人合作形成團隊，但沒有人告訴他們該做什麼。 他們是自由的。他們只忠於他們的客戶。 他們可以靜默數個月，看似沒有活動，直到他們有新東西要推出給世界。 但這並不意味著這是一份簡單的工作。完全相反。事實上，我覺得現在我做的工作比起我當自由工作者/承包商時要困難得多。 沒有人給你一堆事情要完成。沒有辦法去「融入」。這行業的成功只能由最勇敢的自己來實現。你必須大方地展示自己，而我一直都是個相當害羞的人。 而且你需要每天都進步。相比昨天，今天要做得更好。 但是，我不願意將這份工作換成一份失去完全控制權的工作。尤其是時間的掌控權。我可以決定什麼時候去做某件事。我也可以決定是否要去做。如果對業務和我來說都是正確的事情，我可以做出決策。 而有時對業務正確的事情對我個人來說不正確，這時就需要考慮採取哪種路線。 思考的美妙之處在於可以在任何地方進行。而事實證明，我最好的思考發生在長時間漫步的森林中，沒有其他人在眼前出沒。 諷刺的是，我能想到的最類比的事情，步行在森林中，讓我能在數位世界中從事自己喜愛的事情。
在一些教程、書籍或視頻中，你可能會看到神奇數字這個術語。 那是什麼？ 什麼時候一個數字被稱為神奇？ 不幸的是，和神奇數字無關的是魔術師。 簡單地說，當一個數字沒有相關含義時，我們稱其為神奇數字。 可能是傳遞給函數的一個未記錄的數字，或者是在你的代碼中聲明的一個數字，可能是由團隊成員添加的，你真的不知道它代表什麼。 如果你對它進行更改會發生什麼？沒人知道。 需要通過實驗來找出結果。 這些數字真的很煩人。在代碼中應該避免使用神奇數字。 可以聲明一個帶有有意義名稱的常量，並使用它來代替神奇數字。 例如： const int PIN_ID = 1; doSomething(PIN_ID); 相比於： doSomething(1); 上述的方式更好，而且自我解釋性更強。
我在使用一個 API 路由並在回應表單提交後調用了以下程式： res.redirect('/') 在本地開發時運作得很好，但是當我將它部署到 Vercel 時，重定向結果卻呈現了一個空白頁面。URL 是正確的，但需要刷新頁面才能顯示內容。 我不確定為什麼會這樣，但我通過使用 res.writeHead() 來解決這個問題： res.writeHead(302, { Location: '/' }).end() 302 Found HTTP 狀態碼是執行 URL 重定向的常見方式。
在 jQuery 中，我最喜歡的功能之一就是事件委派。特別是.on()方法。 我們先選擇一個 DOM 元素，然後使用.on()來附加一個事件處理程序，該處理程序將在該元素的特定子元素上執行。 為什麼這很有用？因為如果你動態地將元素添加到 DOM 中，通過.on()注册的單個事件監聽器將對所有子元素都有效，包括在註冊事件處理程序之後添加到 DOM 中的子元素。 假設你有一個表格。在表格內部，我們有一組行，每個行都有一個帶有點擊處理程序的按鈕。 在 DOM 加載時，你註冊一個事件監聽器： document.addEventListener('DOMContentLoaded', () => { const buttons = document.querySelectorAll('button') for (const button of buttons) { button.addEventListener(...) } }) 但如果我們向表格中添加一個新的行，我們還必須記得註冊一個新的事件監聽器。 那麼我們如何使用原生 JavaScript 實現相同的功能呢？ 我們可以創建一個 on 函數，該函數接受三個參數：包裹元素的選擇器，事件類型（例如 'click' 字符串），以及子元素的選擇器字符串，用於匹配包裹元素的後代元素。在這個函數中，我們首先創建一個循環，然後對每個與我們的包裹元素選擇器匹配的元素添加事件監聽器（因此它可以應用於多個包裹元素）。 然後，如果事件的目標與我們的子元素選擇器（函數的第三個參數）匹配，我們調用作為第四個參數傳遞的回調函數，並將事件作為參數傳遞： const on = (selector, eventType, childSelector, eventHandler) => { const elements = document.querySelectorAll(selector) for (element of elements) { element.addEventListener(eventType, eventOnElement => { if (eventOnElement.target.matches(childSelector)) { eventHandler(eventOnElement) } }) } } 這是我們如何調用這個函數：...
我想知道沒有 CSS 的頁面是什麼樣子。 我知道的一種方法是打開開發者工具，在 Sources 面板中可以看到 CSS 文件的列表。你可以在那裡刪除 CSS 文件中的內容，然後頁面就會改變。舉個例子，這是我的 <thereactcourse.com> 網站。 它有 3 個 CSS 文件，我可以找一個文件並刪除其中的所有內容： 結果就是這樣，頁面因為我們刪除了 CSS 而改變了： 請注意，這只會改變瀏覽器中的 CSS，不會以任何方式與你的文件互動，即使它是本地文件。 然而，現在有些網站將 CSS 嵌入到 style 標籤中（包括我的網站），有些網站則散佈了很多 CSS 文件，這種方法就不太實用了。 打開控制台並運行以下命令： document.querySelectorAll('style,link[rel="stylesheet"]').forEach(item => item.remove()) 這將同時移除內嵌和連接的 CSS。
深入了解 Next.js 應用程式捆綁檔案內容的方法。 Next.js 提供了一種分析產生程式碼捆綁檔案的方式。 打開專案的 package.json 檔案，並在 scripts 區塊中新增以下三個指令： "analyze": "cross-env ANALYZE=true next build", "analyze:server": "cross-env BUNDLE\_ANALYZE=server next build", "analyze:browser": "cross-env BUNDLE\_ANALYZE=browser next build" 就像這樣： { "name": "firstproject", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build", "start": "next start", "analyze": "cross-env ANALYZE=true next build", "analyze:server": "cross-env BUNDLE\_ANALYZE=server next build", "analyze:browser": "cross-env BUNDLE\_ANALYZE=browser next build" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "next": "^9....
從瀏覽器中列印到打印機或PDF文件時，我們提供了一些使用CSS的提示。 打印CSS CSS @media print 鏈接 頁面邊距 分頁 避免在中間斷裂圖像 PDF大小 調試列印效果 儘管我們越來越多地盯著屏幕，但列印仍然很重要。 即使是博客文章。我記得在2009年的某個時候，我遇到一個人告訴我，他讓他的個人助理打印我發布的每篇博客文章（是的，我詫異地看了一會兒）。絕對出乎意料。 我通常查看列印的主要用例是將內容列印為PDF。我可能在瀏覽器內創建了一些東西，然後希望它以PDF方式保存。 瀏覽器讓這變得非常容易，Chrome在嘗試列印文檔且沒有可用打印機時，將默認設置為“保存”，而Safari則在菜單欄中提供了一個專用按鈕。 打印CSS 在列印時，您可能希望隱藏文檔的某些部分，例如底部、頁眉、側邊欄。 也許您還希望在列印時使用不同的字體，這是完全合理的。 如果您有一個用於打印的大型CSS，最好使用單獨的文件來處理。瀏覽器只在列印時下載該文件： <link rel="stylesheet" src="print.css" type="text/css" media="print" /> CSS @media print 除了上面的方式，還可以使用媒體查詢（media queries）。您可以在此塊中添加的任何內容都只會套用於列印的文檔中： @media print { /* ... */ } 鏈接 HTML之所以偉大，是因為它具有鏈接功能。這就是為什麼它被稱為超文本的原因。當我們列印時，可能會丟失很多信息，這取決於內容。 CSS提供了一種很好的解決方法，即編輯內容，在<a>標籤文本後附加鏈接，使用以下方式： @media print { a[href\*='//']:after { content:" (" attr(href) ") "; color: $primary; } } 我將目標定位到僅外部鏈接a[href*='//']。因為我可能還有用於導航和內部索引的內部鏈接，這在大多數用例中都不起作用。如果您希望也列印內部鏈接，只需使用以下方式： @media print { a:after { content:" (" attr(href) ") "; color: $primary; } } 頁面邊距 您可以為每個頁面添加邊距。針對紙張列印，cm 或 in 是一個很好的單位。...