Home » Tags

React

如何安裝 React

如何在開發電腦上安裝 React 你該如何安裝 React？ React 是一個函式庫，所以說「安裝」可能聽起來有點奇怪。也許「設置」是一個更好的詞，但你懂得概念。 有多種方式可以設置 React，以便在你的應用程式或網站中使用。 在網頁中直接載入 React 最簡單的方法是將 React 的 JavaScript 檔案直接添加到網頁中。當你的 React 應用程式與現有頁面上的元素互動時，而不是控制整個導航方面時，這是最佳選擇。 在這種情況下，你需要在 body 標籤的末尾添加兩個 script 標籤： <html> ... <body> ... <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js" crossorigin ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js" crossorigin ></script> </body> </html> 在連結中的 16.7.0-alpha.2 版本表示當前最新版本的 16.7 alpha（在撰寫本文時）。請將其更改為可用的最新 React 版本。 在這裡，我們載入了 React 和 React DOM 兩個庫。為什麼會有兩個庫呢？因為 React 完全獨立於瀏覽器，可以在瀏覽器之外使用（例如，在 React Native 上使用於移動設備）。因此需要 React DOM 來添加瀏覽器的包裝。 在這些標籤之後，你可以載入使用 React 的 JavaScript 檔案，或者甚至在 script 標籤中內嵌 JavaScript： <script src="app.js"></script> <!-- or --> <script> //我的應用程式 </script> 使用 JSX 需要多一個步驟：載入 Babel...

如何將React應用連接到相同源的後端

如何從同一個源中提供React應用和後端應用，而無需在服務器上使用CORS並擔心端口的問題。 我認為最常用的啟動React應用的方式是使用create-react-app命令，這非常方便。 你可能會遇到的問題之一是如何將React應用與您已經擁有的後端應用程式或您可能想要創建的後端應用程式連接起來。 開發過程中 在開發應用程序時，您希望利用熱加載和其他便利的功能。那麼如何在不使用CORS並擔心端口的情況下將其與後端結合起來呢？ 本文將以Express框架提供示例，但這個方法也適用於其他框架。 假設您正在進行測試，那麼讓我們創建一個React應用： npx create-react-app testing 然後 cd testing 現在，在server.js文件中創建一個簡單的Express服務器，您可以將其添加到任何位置，甚至可以是一個單獨的文件夾。 如果您選擇將此文件添加到create-react-app應用程式代碼中，請運行： npm install express 然後，添加以下簡單的Express設置： const express = require('express'); const app = express(); app.get('/hey', (req, res) => res.send('ho!')) app.listen(8080) 關鍵點：打開package.json文件，並將以下代碼添加到其中的某個位置： "proxy": "http://localhost:8080" 這告訴React將API請求代理到使用Express構建的Node.js服務器。 現在使用node server.js運行此Node.js進程。在另一個窗口中，使用npm start啟動CRA應用。 當瀏覽器在端口3000上打開時（默認情況下），在DevTools中執行以下代碼： fetch('/hey') 如果檢查網絡面板，您應該可以看到成功的響應以及ho!消息。 在生產環境中 在生產環境中，當您準備好部署時，您將運行npm run build來編譯React應用程序，並使用Express服務器來提供這些靜態文件。 整個代理的設置在生產環境中是無用的（它也無法正常工作，它只用於開發）。因此，如果您認為方便，可以將其保留在package.json文件中。 在以下代碼中，我們使用了path內置的Node模塊，並告訴應用程序提供React應用的靜態編譯版本： const express = require('express') const path = require('path') const app = express() app.use(express.static(path.join(__dirname, 'build'))) app.get('/ping', (req, res) => { return res.send('pong') }) app....

如何強制在每個 Axios 請求中使用憑據

我使用 Axios 與一個設定了 JWT 權杖的 API 進行交互。 該 API 在 cookie 中返回該令牌，我很快發現我需要在 Axios 選項中設置 withCredentials: true: import axios from 'axios' axios.post(API\_SERVER + '/login', { email, password }, { withCredentials: true }) 否則，cookie 將不會被保存。 我還需要在我發出的每個其他請求中設置它，以將 JWT 權杖發送到服務器: axios.get(API\_SERVER + '/todos', { withCredentials: true }) 現在，對於少量請求，這是可行的，但對於許多請求，您可能希望使用一個通用的配置。 您可以使用 create() 方法來創建一個新的 Axios 實例，然後在您的請求中使用它: import axios from 'axios' const instance = axios.create({ withCredentials: true }) instance.get(API\_SERVER + '/todos') 通常還會添加一個 baseURL 屬性: import axios from 'axios' const instance = axios....

如何確保上傳的圖片大小小於特定大小

我有一個表單，其中包含一個文件輸入框，讓用戶上傳圖片： <input name='image' type='file' accept='image/\*' 我需要這個圖片的大小小於3MB。 因此，我將以下代碼添加到React應用程序中的onChange事件中，以實現此要求： <input name='image' type='file' accept='image/\*' onChange={(event) => { if (event.target.files && event.target.files[0]) { if (event.target.files[0].size > 3 \* 1000 \* 1024) { alert('最大允許的大小為3MB') return false } setImage(event.target.files[0]) setImageURL(URL.createObjectURL(event.target.files[0])) } }} />

如何處理 React 中的錯誤

使用錯誤邊界 (error boundaries) 的最佳實踐來處理 React 中的錯誤 當在組件中發生錯誤時，React 會卸載整個 React 組件樹，渲染出「空白」的頁面。這是 React 處理崩潰的方式。 您不希望錯誤顯示給用戶。React 選擇顯示空白頁面。 然而，這只是默認行為。讓空白頁面出現只比給用戶顯示晦澀的訊息好一點，但您應該找到更好的方式。 如果您處於開發模式，任何錯誤將觸發詳細的堆棧跟踪信息顯示到瀏覽器的開發工具控制台中。但在正式環境中，您不想把錯誤訊息直接印給用戶。 在正式環境中，您應該攔截錯誤，並向用戶顯示某種有用的訊息。 這就是「錯誤邊界」 (error boundaries) 發揮作用的地方。 使用錯誤邊界，您可以分離應用的各個部分並在本地處理錯誤。 錯誤邊界是一個實現了 componentDidCatch() 生命周期事件的 React 組件，並將其他組件封裝在內： class ErrorHandler extends React.Component { constructor(props) { super(props) this.state = { errorOccurred: false } } componentDidCatch(error, info) { this.setState({ errorOccurred: true }) logErrorToMyService(error, info) } render() { return this.state.errorOccurred ? <h1>出現錯誤了！</h1> : this.props.children } } 然後在組件的 JSX 中以以下方式使用它： <ErrorHandler> <SomeOtherComponent /> </ErrorHandler> 當 SomeOtherComponent 或其他子組件中發生錯誤時，以及它們擁有的整個組件子樹中發生的錯誤，ErrorHandler 將攔截並使您能夠優雅地處理錯誤。...

如何解決 React 中的 \"dangerouslySetInnerHTML 錯誤未匹配\" 問題

在這篇文章中，我將告訴你如何解決 React 應用程式中的 “dangerouslySetInnerHTML 錯誤未匹配” 問題。 我嘗試使用 dangerouslySetInnerHTML 來輸出包含在屬性中的 HTML 字符串，但卻在瀏覽器控制台中看到以下錯誤訊息： 警告：屬性 `dangerouslySetInnerHTML` 未匹配。 此問題出現在 Next.js 專案中，但解決方法同樣適用於任何 React 代碼。 我嘗試輸出一個固定的 HTML 字符串，如下所示： <p dangerouslySetInnerHTML={{ __html: '<p>test</p>' }}></p> 這個錯誤訊息看起來很嚴重，但過了一會兒，我才意識到我不能在一個 p 標籤中設置另一個 p 標籤。 最後，我將代碼改為： <div dangerouslySetInnerHTML={{ __html: '<p>test</p>' }}></div> 問題迎刃而解。

如何解決 React 中的「無法在渲染不同元件時更新元件」錯誤

一個解決 React 錯誤的快速指南 在開發 React / Next.js 應用程式時，我遭遇了以下錯誤： 無法在渲染不同元件時更新元件 (Cannot update a component ('App') while rendering a different component) 我進行了相關研究，但所找到的資料中有很多混淆的內容。 以下是我的處理方式：我在 App 元件中管理一個集中式狀態： function MyApp({ Component, pageProps }) { const [lessonsRead, setLessonsRead] = useState() return ( <Component lessonsRead={lessonsRead} setLessonsRead={setLessonsRead} {...pageProps} /> ) } 在 Next.js 的頁面元件中，我呼叫 setLessonsRead 方法，以 SWR（fetch）呼叫的結果為基準，將資料填充到這個狀態中： if (courseData && courseData.lessonsRead) { setLessonsRead(courseData.lessonsRead) } 我將這段程式碼直接放在元件中。 為了解決這個問題，我必須使用 useEffect 將這段程式碼包裹起來，只在資料變動時執行，而不是在每次元件屬性更新時都執行： useEffect(() => { if (courseData && courseData.lessonsRead) { setLessonsRead(courseData.lessonsRead) } }, [courseData])

如何解決 React 登入表單狀態和瀏覽器自動填充的問題

在進行一個項目時，我遇到了一個問題，這個項目是使用 React 構建的表單，並且與瀏覽器的自動填充功能有關。 你知道嗎，當瀏覽器自動填寫你的用戶名/密碼，因為你之前已經輸入過？ 那就是自動填充，這也是我遇到問題的原因。特別是在 Chrome 和 Firefox 上複製這個問題，但任何瀏覽器都可能碰到這個問題。 這個表單是使用 useState 鉤子構建的一個普通而簡單的表單。 這是表單中的一個示例「email」字段： import { useState } from 'react' //... const [email, setEmail] = useState('') <input id='email' type='email' name='email' value={email} onChange={(event) => setEmail(event.target.value)} /> 當你在這個字段中輸入電子郵件時，email 的值會使用 setEmail 進行更新，這樣我就可以在表單提交事件中使用它，然後將它發送到服務器。 在某個時刻，我意識到瀏覽器正在自動填寫電子郵件地址和密碼，但是 React 卻沒有識別到它！ 可能是因為它在 React 完全運行之前就填寫了該字段，所以無法截取該事件。 我進行了一些研究，不同瀏覽器的不一致性和自動填充工作方式的差異讓我感到困惑，因此我不得不創建一個簡單的解決方案。 我使用了 useRef 和 useEffect 來實現它： import { useState, useEffect, useRef } from 'react' 我創建了一個 ref： const emailField = useRef(null) 並將它附加到 JSX 的輸入字段上： <input ref={emailField} id='email' type='email' name='email' value={email} onChange={(event) => setEmail(event....

如何設置 Next.js 專案結構

Next.js 是一個很好的工具，它能為我們的 React 應用提供許多內建的功能，這些功能在 Web 應用程式中至關重要。 它只為我們的專案文件提供了一點點結構。 所有可見的頁面都放在 /pages 資料夾下。 API 路由則放在 /pages/api 資料夾下。 公開可見的文件放在 /public 資料夾下。 基本上就是這樣。其他的結構都由我們來定義。 我通常會這樣做。 所有頁面需要的 React 元件都放在 /components 資料夾下。 我通常有一個 /components/Common 資料夾，然後根據頁面結構重新創建資料夾： /components/Common /components/Home /components/Profile …以此類推。 然後我有一個 lib 資料夾，其中包含所有被 React 元件或 API 路由使用的工具程式。這可能是資料獲取、庫初始化、Prisma 設置、資料庫存取、SWR 的請求器、easy-peasy store 等等，基本上任何在任何地方都可以重複使用的東西，但卻不是元件。 我也確保可以這樣引入它們： import comp from components/Common/comp import x from lib/x 使用 jsconfig.json 中的以下設定進行設置： { "compilerOptions": { "baseUrl": "." } } 我提到了我常常使用的 Prisma。這將需要它自己的 /prisma 資料夾，用於存放模式和遷移，如果需要的話，還可以有一個 SQLite 數據庫。 如果網站有內容（例如 Markdown），我會新增一個 /content 資料夾。...

如何調試一個React應用程序

當你遇到問題時，可以使用一些工具來調試React應用程序 調試React應用程序的最佳工具是使用 React開發者工具。這是一個瀏覽器擴展，可以輕鬆地檢查和分析React應用程序。 我寫了一篇完全專門介紹React開發者工具的博客文章，請查看: React開發者工具。 除了React開發者工具之外，這對於構建Next.js應用程序至關重要，我還想強調兩種調試Next.js應用程序的方法。 首先當然是 console.log() 和其他 Console API 工具。Next應用程序的工作方式將使日誌語句在瀏覽器控制台或使用 npm run dev 啟動Next的終端中工作。 特別是，如果頁面從服務器加載，當您將URL指向它時，或者點擊刷新按鈕（cmd/ctrl-R），任何控制台日誌都會在終端中發生。 透過點擊鼠標導致的後續頁面轉換將使所有控制台日誌在瀏覽器內發生。 只要記住，如果你對於缺少日誌感到驚訝。 另一個不可或缺的工具是 debugger 語句。將此語句添加到組件中將暫停瀏覽器渲染頁面: 關於如何使用這些工具的最好建議在我的 JavaScript調試指南 中。真是太棒了，因為現在您可以使用瀏覽器調試器檢查值並逐行運行應用程序 如果您使用的是Next.js，您還可以使用 VS Code 調試器調試服務器端代碼。我在 此教程 中提到了這種技術和設置方法。