此人尚未填寫簡介。
登入次數:64 次
註冊於2023年02月16日
  發表了 2 篇貼文
  新增了 11 則留言
  貼文共 2,940 次瀏覽
近期留言






useContext 常犯錯誤與如何在 TS 使用

https://youtu.be/I7dwJxGuGYQ ## TL;DR - 在使用 useContext 時,一定要將其包裝成 custom hook - [好讀版本](https://hackmd.io/@jason60810/rklVqNUh2) - [React 官方文件新增了 TypeScript 使用專文](https://react.dev/learn/typescript?fbclid=IwAR3Pgkr8xpS48Vwa0ADo3oagaAPKX1q05jHhtbXH8ltV8MKwa8FAvePoXPU) - [英文版本](https://jason60810.hashnode.dev/always-use-a-custom-hook-for-context-api-not-usecontext-react-context-api-typescript) ## 資料夾結構 ( 使用 next app route ) ![](https://hackmd.io/_uploads/Bke6AE8n2.png) ### theme-context.tsx 一定要加上 `use client`,因為 useState 只能在 client component 運作 , **特別注意,就算這裡加了`use client`,所有的子層還是 server component (預設)** ![](https://hackmd.io/_uploads/BkF5REL3n.png) ### layout.tsx 加上 provider 之後,下面所有的子層都可以拿到值,不用用 prop 一個一個傳下去 ![](https://hackmd.io/_uploads/rJWXaVLnh.png) ### page.tsx ![](https://hackmd.io/_uploads/rJ-_ANI32.png) ### logo.tsx 1. 因為 useContext 要在 client component 運作,所以要加上 `use client`。 2. 當使用 useContext 時,一定要引入 ThemeContext,用起來很麻煩 3. 因為 ThemeContext 預設是 null,所以當不是在 provider 裡使用 `useContext` 時 ( Logo component ),會發生錯誤,因此需要先確認有 context ![](https://hackmd.io/_uploads/B1hAgrI23.png) 舉例:不是在 provider 裡使用 `useContext` ![](https://hackmd.io/_uploads/SkbYZrI23.png) ### 創建 custom hook ![](https://hackmd.io/_uploads/HJBffSI2n.png) ### 使用 custom hook 現在引入 ThemeContext 和處理錯誤的問題,已經抽離到 custom hook 中 ![](https://hackmd.io/_uploads/ByjYzr8n3.png) ### 加上型別 1. React.ReactNode,可以接受 JavaScript primitives ,如果只想要是 jsx 可以使用 React.ReactElement ( [react 官方文件](https://react.dev/learn/typescript#typing-children) ) 2. `type Theme` 可以讓 `useState` 在 get 和 set 時,可以使用正確的型別,例如:當想要 `setTheme('blue')` 時,會報錯,因為 `type Theme` 只有 'dark' 和 'light' 3. 在給予 createContext 型別時,可以利用 ts 的 union 讓 createContext 知道可能有 null 這個型別 ( [react 官方文件](https://react.dev/learn/typescript#typing-usecontext) ) ![](https://hackmd.io/_uploads/B13EHHI3h.png)