我在一個 Next.js 應用程序中使用 Heroicons，它們方便地將圖標封裝為 React 組件。 我想要做的一件事是自定義描邊寬度，使它們顯示得更細。 我查看了 JSX 中如何做到這一點，也許使用屬性，但是我找不到方法。 我可以直接從該網站導入 SVG，但我喜歡使用 React 組件的方法。 由於某種原因，我認為直接設置全局 CSS 屬性並不起作用，因為它在 SVG 中是硬編碼的，但實際上它起作用了： svg path { stroke-width: 1; }
如何使用SASS來設計React應用程式 當你使用create-react-app來建構React應用程式時，你有很多選擇來進行樣式設計。 當然，如果你不使用create-react-app，你有無數的選擇，但我們只討論create-react-app提供的選項。 你可以使用普通的class和CSS檔案、使用style屬性或CSS模組來進行樣式設計。 SASS/SCSS是非常流行的選項，許多開發人員喜愛使用它。 你可以在create-react-app 2版本中完全不需要任何配置就可以使用它。 你只需要一個.sass或.scss檔案，然後在組件中引入它： import './styles.scss' 你可以在https://codesandbox.io/s/18qq31rp3看到它正常運作的範例。
我想根据鼠标悬停状态来显示或隐藏一个小面板。 当我悬停在链接上时，面板会显示出来。 然后我可以用鼠标进入这个面板，当我移开鼠标时，面板会隐藏起来。 就像Twitter上的个人资料，在鼠标悬停在一个人的名字上时会显示出来： 对于触发面板显示的<a>元素，我添加了onMouseEnter事件： <a onMouseEnter={() => { setShowCard(true) }} >flavio</a> 所以当我用鼠标悬停在它上面时，面板会显示出来，因为它是根据我之前设置的showCard状态变量来显示的： const [showCard, setShowCard] = useState(false) 然后我有一个ProfileCard组件，但是我不能简单地这样做： <ProfileCard onMouseEnter={() => { setShowCard(true) }} onMouseLeave={() => { setShowCard(false) }} /> 因为它不起作用。ProfileCard不是一个DOM元素，所以它无法响应被触发的事件。 我必须将onMouseEnter和onMouseLeave作为props传递给ProfileCard组件，然后在组件内部找到可以接收这些事件的正确DOM元素，并在那里附加事件处理程序。在这种情况下，我使用了容器div： const ProfileCard = ({ onMouseEnter, onMouseLeave }) => ( <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}> ... 现在当离开面板时，它会隐藏起来。
什麼是代碼分割，以及如何在React應用程序中引入它 現代JavaScript應用程序在捆綁大小方面可能相當巨大。您不希望用戶需要下載1MB大小的JavaScript包（包括您的代碼和使用的庫）才能加載首頁，對吧？但是這是使用Webpack捆綁構建的現代Web應用程序的默認情況。 該捆綁包將包含一些可能永遠不會運行的代碼，因為用戶只停留在登錄頁，從不看到應用程序的其他部分。 代碼分割是僅在需要時加載JavaScript的一種實踐方式。 這將改善： 應用程序的性能 對內存的影響，以及移動設備的電池使用情況 下載的基於KB（或MB）的大小 React 16.6.0於2018年10月發布，引入了一種進行代碼分割的新方法，它應該取代以前使用的所有工具或庫：React.lazy和Suspense。 React.lazy和Suspense組成了一種完美的方式來懶加載依賴項，並且只在需要時加載它。 讓我們從React.lazy開始。您可以使用它來導入任何組件： import React from 'react' const TodoList = React.lazy(() => import('./TodoList')) export default () => { return ( <div> <TodoList /> </div> ) } 在它可用的時候，TodoList組件將動態添加到輸出中。Webpack將為其創建一個單獨的捆綁包，並在需要時進行加載。 Suspense是一個您可以用於包裝任何懶加載組件的組件： import React from 'react' const TodoList = React.lazy(() => import('./TodoList')) export default () => { return ( <div> <React.Suspense> <TodoList /> </React.Suspense> </div> ) } 它負責處理在懶加載組件被提取和渲染時的輸出。 使用fallback屬性輸出一些JSX或組件： ... <React.Suspense fallback={<p>Please wait</p>}> <TodoList /> </React....
如何在React中動態輸出某些元素或其他元素 在React的元件JSX中，您可以基於條件進行動態決定要輸出的元件或其他元素，或者只是其中一部分的JSX。 最常見的方式可能是使用三元運算符： const Pet = (props) => { return ( {props.isDog ? <Dog /> : <Cat />} ) } 另一種方式是使用&&運算符，當您概念上只有if而無else時，這種方式很好用。它的運作方式是：如果它之前的表達式求值為true，則打印之後的表達式： const Pet = (props) => { return ( {props.isDog && <Dog />} {props.isCat && <Cat />} ) }
不行。 我不知道具體的技術原因，但是這是不可能的。 我在使用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的內部，這使它對我起作用了。
Prisma 使用教程 Prisma 是一個有趣的 ORM（Object-Relational Mapping）。 ORM 是一個對數據庫的抽象層。 在過去的幾個月中，我有幸在幾個不同的項目中使用了 Prisma，現在我想向您展示如何輕鬆入門（並不斷前進）。 我將在基於 Next.js 的 React 應用程序中使用 Prisma。 您可以創建一個新的 Next.js 應用程序文件夾： npx create-next-app 要添加 Prisma，您首先需要在開發依賴中包括 prisma： npm install -D prisma 現在，您可以使用 npx 命令訪問 Prisma CLI 工具。嘗試運行： npx prisma 您將看到如何使用它的說明。 現在運行以下命令為您的項目設置 Prisma： npx prisma init 這將創建一個 prisma 文件夾，在其中創建一個 schema.prisma 文件： // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema datasource db { provider = "postgresql" url = env("DATABASE\_URL") } generator client { provider = "prisma-client-js" } 它還將創建一個 ....
了解 useContext React hook 的用途，以及如何使用它！ 如果您對 React hooks 還不熟悉，請先查看我的React hooks 簡介。 在 React 中，我有時會使用一個叫做 useContext 的 hook。 import React, { useContext } from 'react' 這個 hook 與 React Context API 搭配使用。 特別是，這個 hook 允許我們獲取當前的 context 值： const value = useContext(MyContext) 這個值是指最接近的 <MyContext.Provider> 組件。 調用 useContext 還會確保在 context 值發生變化時重新渲染組件。 我建議您閱讀我的Context API 教程以更深入地了解它。
了解 useReducer React Hook 的用途以及如何使用它！ 自從 React 引入了 hooks 以來，我在幾個專案中都使用過它們，它們真的很強大。 移除所有基於 class 的組件，讓代碼更像是真正的 JavaScript。而且函數組件終於可以管理狀態了。 如果你對 hooks 還不熟悉，請先看看我的React hooks介紹。 我有時會使用到的一個 Hook 是 useReducer。 import React, { useReducer } from 'react' 這個 Hook 用於管理狀態，類似於 useState，但更複雜。 這就是 useState 和 useReducer 的關鍵差異：使用 useReducer 時，通過傳遞消息來改變狀態，而不是直接調用狀態更新函數。 如果你知道 Redux 是如何工作的，這就基本上是一樣的。一個 reducer 是一個純函數，它根據先前的狀態和已分發的動作計算出下一個狀態。 (currentState, action) => newState “純函數” 是什麼意思？純函數接收輸入並返回輸出，而不會改變輸入或其他任何東西。這意味著 reducer 返回一個完全替換先前狀態的全新狀態。 一個 reducer 應該： 永遠不要改變其參數 永遠不要生成副作用（不要有任何改變狀態的 API 調用） 永遠不要調用非純函數，即根據與其輸入之外的因素改變其輸出的函數（例如 Date.now() 或 Math.random()） 雖然沒有強制要求，但你應該遵守這些規則。這樣做的好處是：reducer 更容易進行測試，因為它們沒有副作用。 這允許集中管理狀態，允許組件通過發送消息來修改狀態，還可以在組件中使用和更改較為複雜的狀態。 讓我們通過一個計數器組件來舉個例子。 useReducer 接受一個 reducer 函數和一個初始狀態值作為參數。在這個例子中，我們的狀態是一個整數，起始值為 0：...
在建立React應用程式時，例如使用Next.js建立的應用程式，React Developer Tools是一個絕對必要安裝的工具。 React Developer Tools提供了一個檢查React應用程式的工具，可以顯示React元件樹狀結構，並且可以查看每個元件的props、state、hooks等等。 安裝好React Developer Tools後，你可以打開瀏覽器的開發人員工具（在Chrome中，右鍵點擊頁面，然後點擊Inspect），你會發現兩個新的面板：Components（元件）和Profiler（性能分析）。 如果你將滑鼠移動到元件上，瀏覽器會在頁面上選擇由該元件渲染的部分。如果你在樹狀結構中選擇任何元件，右側的面板將顯示對應元件的父元件和傳遞給它的props： 你可以輕鬆地通過點擊元件名稱來進行導航。 你可以點擊開發人員工具工具欄中的眼睛圖標來檢查DOM元素，如果你使用第一個圖標（方便地位於類似常規DevTools圖標下方的滑鼠圖標），你可以將滑鼠懸停在瀏覽器UI中的元素上，以直接選擇渲染該元素的React元件。 你可以使用bug圖標將元件數據記錄到控制台。 這非常棒，因為一旦你將數據打印出來，在控制台中你可以右鍵點擊任何元素，然後選擇“存儲為全局變量”。例如，我在此示例中使用了url prop，並且我能夠在控制台中通過臨時變量temp1來檢查它： 使用Next.js自動加載的Source Maps（在開發模式下），從元件面板中，我們可以點擊<>代碼，DevTools會切換到Source面板，並顯示元件的源代碼： Profiler（性能分析）標籤更加出色，如果可能的話。它允許我們記錄應用程式中的交互並查看發生了什麼。我現在還無法展示一個例子，因為至少需要兩個元件來創建一個交互。我稍後會談到這個。 我展示的所有截圖都是使用Chrome，但是React Developer Tools在Firefox中的工作方式是相同的：