hooks useResponsive 在 nextjs 運作不正常

gjmwrych  于 2022-10-25  发布在  其他
关注(0)|答案(6)|浏览(134)

我試過 useResponsive 不能在 nextjs 環境 resize,只有第一次render有數值,螢幕縮放沒反應
p.s 如果要在 nextjs.運行,那 configResponsive 寫在 _app.tsx 嗎?

"ahooks": "^3.7.0",
  "next": "^12.3.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
w8rqjzmb

w8rqjzmb1#

看來是isBrowser的問題,這個能移除嗎

acruukt9

acruukt92#

我看了一下 code 我想 應該是不太需要用到 configureResponsive

configureResponsive 改用變數的方式傳進去
useResponsive , 開發者自己定義變數自己要用到 就import 進 useResponsive,這樣應該彈性很多

const configResponse = {
  small: 0,
  middle: 800,
  large: 1200,
})

import { configResponse } from '/contants/responsive'

const response = useResponsive(configResponsive )
klh5stk1

klh5stk13#

https://usehooks-ts.com/react-hook/use-media-query

我想 還能考慮多一個用 window.matchMedia的 hook來做判斷,我使用過,這個判斷方式也還蠻不錯的

jm2pwxwz

jm2pwxwz4#

Q1:
看來是isBrowser的問題,這個能移除嗎

A: 不能移除,因为这个 hook 只支持浏览器( 因为没用过 next.js, 顺便问一下,next.js 判断是 false 吗 )

Q2:
我想 還能考慮多一個用 window.matchMedia的 hook來做判斷,我使用過,這個判斷方式也還蠻不錯的

A: 如果有很好的想法,欢迎 PR

ttp71kqs

ttp71kqs5#

可以提供一个在线 demo 吗

fjnneemd

fjnneemd6#

Hi, wildfrontend.

It seems that this issue is a bit vague and lacks some necessary information.

看起来这条 issue 描述得有些模糊,缺少一些必要的信息。

相关问题