如何在需要時重新渲染 Svelte 元件，特別是在需要再次運行函數屬性時重新渲染。 昨天我遇到了這個問題：我正在使用一個日期選擇器 Svelte 元件 - 其中有兩個實例。 為了讓您更了解背景，我想設置一個開始日期和一個結束日期： 當您點擊開始日期時，日期選擇器會出現： 當您點擊結束日期時，第二個日期選擇器會出現： 問題在於根據開始日期，結束日期有一些限制。例如，一個合理的限制是您不能設置早於開始日期的結束日期。 日期選擇器元件公開了一個名為 selectableCallback 的函數屬性，該函數在元件首次渲染時運行，遍歷日曆中的所有日期，讓我有機會返回 false 來禁用某些日期。 <script> let endDateSelectableCallback = date => { //TODO: decide if date is ok } </script> <Datepicker selectableCallback={endDateSelectableCallback} > 聽起來很好！ 但是，這個函數只在元件首次渲染時運行。 我需要找到一種方法，在其他元件更改其值時重新運行該函數，這樣我就可以移除所有早於所選開始日期的日期。此外，該函數可能需多次運行，因為用戶可能會更改想法。 所以…當在其他元件上選擇日期時，我使用了 on:dateSelected 事件來重新分配給我之前賦值給 selectableCallback 的函數 endDateSelectableCallback： <script> let endDateSelectableCallback = date => { //TODO: decide if date is ok } </script> <!-- 第一個日期選擇器，開始日期 --> <Datepicker on:dateSelected={e => { endDateSelectableCallback = endDateSelectableCallback; }}> selectableCallback={endDateSelectableCallback} </Datepicker> <!...

讓我幫助您最終退出 Vim！ 想要保存更改並退出嗎？按下 esc 鍵，然後輸入 :wq，意思是 write（寫入）並 quit（退出）。 想要在不保存更改的情況下退出嗎？按下 esc 鍵，然後輸入 :q!。 不要覺得糟糕，因為不知道如何退出 Vim 的人並不少，如果你在 Twitter 上搜索一下，你會看到各種梗和有趣的推文： “如何生成隨機字符串？把一個大一的電腦科學學生放在 Vim 中，然後要求他們保存並退出。” “只有简单地退出 Vim 是不可能的。” “沒有人知道如何退出 Vim。” “我已經使用 Vim 很長時間了，主要是因為我搞不清楚如何退出。” 在 Stack Overflow 上，這似乎是一個最受歡迎的問題（如果不是 最受歡迎的問題）。 別誤解我的意思。我喜歡 Vim。我不是愛它，它只是一個工具。我通常使用 VS Code 進行日常寫作和編程，但有時也使用 Vim。

如何使用 Let’s Encrypt 在您的 Web 服务器上设置 HTTPS 最近，我使用官方的 Node.js droplet 在 DigitalOcean 上设置了一个 VPS，它会安装 Ubuntu Linux 并将 Node 和 Nginx 配置为反向代理，也就是说，它是用户和您的 Node.js 应用程序之间的中间人。 默认情况下，droplet 配置为使用 HTTP，但我们希望我们的应用程序使用 HTTPS，这是 HTTP 的安全版本。 因此，我们需要进行一些操作，包括使用 Certbot 通过 Let’s Encrypt 获取 SSL 证书，并配置 Nginx 使用该证书。 我们将按照以下步骤进行操作： 安装 Certbot 和 Certbot Nginx 包 设置 Nginx 使用 Certbot 生成 SSL 证书 安装 Certbot 和 Certbot Nginx 包 以下说明假设您使用的是 Ubuntu、Debian 或任何使用 apt-get 管理软件包的其他 Linux 发行版： sudo apt-get install certbot python3-certbot-nginx 设置 Nginx 编辑 /etc/nginx/sites-available/default 文件以设置正确的服务器名称（这对于 SSL 是必需的）：...

了解如何動態導入 JavaScript 模組 您是否曾經有過動態載入 JavaScript 模組的需求嗎？ 也許您正在嘗試從一個資料夾載入東西，但您不知道資料夾的名稱，它是動態生成的。 但執行像這樣的操作： import test from folder + '/test.js' 或 import test from `${folder}/test.js` 無法正常運作。 您需要進行動態導入，使用以下方法： const test = await import(folder + '/test.js') 我在JavaScript 動態導入中更詳細地介紹了 JavaScript 的這個相對較新的功能。

以下是將 Google Analytics 4 添加到基於 Next.js 的網站的步驟。 首先，創建一個 Google Analytics 屬性，並將屬性 ID 保存在 NEXT_PUBLIC_GOOGLE_ANALYTICS 環境變量中。 然後，在 pages/_app.js 文件中添加一個 useEffect() 調用，其代碼如下： import '/public/style.css' function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } 修改它為： import { useEffect } from 'react' import { useRouter } from 'next/router' import 'tailwindcss/tailwind.css' import '/public/style.css' function MyApp({ Component, pageProps }) { const router = useRouter() useEffect(() => { const handleRouteChange = url => { window.gtag('config', process....

在 JavaScript 中將數組轉換為字符串的方法。 您可以使用數組的 toString() 方法來獲取數組的字符串表示： const list = [1, 2, 3, 4] list.toString() 例子： 數組的 join() 方法返回數組元素的連接字符串： const list = [1, 2, 3, 4] list.join() 您可以傳遞參數給這個方法，以添加自定義的分隔符： list.join(', ') 例子：

在你的主題文件夾內運行以下命令： npm init -y 然後安裝 Tailwind CSS 作為開發依賴： npm install -D tailwindcss 使用以下命令初始化 Tailwind： npx tailwindcss init 這將創建 tailwind.config.js 文件。在編輯器中打開該文件，並按以下方式填寫 content 屬性，其中包含主題的佈局文件： module.exports = { content: ['content/**/*.md', 'layouts/**/*.html'], theme: { extend: {}, }, plugins: [], } 現在在主題文件夾中創建 tailwind.css 文件，並添加以下內容： @tailwind base; @tailwind components; @tailwind utilities; 現在打開 package.json，在 scripts 部分添加 build 和 watch 命令： { "name": "valley", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "npx tailwindcss -i ./tailwind.css -o ....

如何從同一個源中提供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....

問題：我有一個包含實際推文數據的 tweet 物件，由於應用程式的架構原因，這個數據被賦值給其 data 屬性中的另一個物件。 想像一下： let tweet = { data: { id: 1, content: 'test' } } 我想要將那些內部屬性移至頂層物件： let tweet = { id: 1, content: 'test' } 而不需要手動複製這些屬性，因為一旦我新增另一個屬性，就會引入一個錯誤。 以下是我的解決方法： tweet = Object.assign(tweet, tweet.data) 這是一種將屬性複製到另一個物件的技巧，但以稍微不同的方式應用。

使用 CSS 或 HTML 的 width / height 屬性設定 canvas 的大小，例如 200 x 400： <canvas width="200" height="400"></canvas> 並且確保也在 JavaScript 中設定 canvas 物件的寬度 / 高度屬性，以避免文本模糊呈現，例如： canvas.width = 1800 canvas.height = 1200 首先，獲取對 canvas 的引用： const canvas = document.querySelector('canvas') 然後從它創建一個上下文對象： const context = canvas.getContext('2d') 現在，我們可以調用上下文對象的 fillText() 方法： context.fillText('hi!', 100, 100) 確保起點的 x 和 y 坐標包含在 canvas 的大小內。 你可以在調用 fillText() 之前傳遞額外的屬性來自定義外觀，例如： context.font = 'bold 70pt Menlo' context.fillStyle = '#ccc' context.fillText('hi!', 100, 100)