iT邦幫忙

0

請問react在一個頁面引用兩個相同的元件

請問react在一個頁面引用兩個相同的元件,請問是否有辦法設定讓這兩個元件一個在桌機時顯示,一個在手機時顯示?

目前小弟都是把元件分成兩個,但這樣感覺增加了好多元件

想請問是否有其他設定的方法

2 個回答

4
harry xie
iT邦新手 2 級 ‧ 2021-10-14 14:53:49
最佳解答

兩個完全一樣的元件嗎?還是功能/樣式會有不同?
如果是兩個完全相同的元件那寫一個就好了吧?然後設定在桌機/手機時都顯示

如果是相同功能的元件,但樣式會隨著裝置大小不同,那就照螢幕尺寸去設定對應的樣式即可

ex:

return <Component className={ isMobile() ? MobileStyle : DesktopStyle } />

或是用 react-responsive 偵測去渲染不同元件
https://github.com/contra/react-responsive

參考問題: https://stackoverflow.com/questions/41478875/creating-different-mobile-layout-for-a-component-in-reactjs

希望這樣有回答到你的問題(?

0
毛毛
iT邦新手 3 級 ‧ 2021-10-14 14:47:04

一般情況我習慣使用 CSS RWD 來控制 手機與桌機的顯示
以 bootstrap 來說,就是

  • 桌機元件 className="d-none d-md-block"
  • 手機元件 className="d-md-none"

而如果想依靠 React 來判斷裝置渲染元件的話,
可以 Andy Chang 寫的這篇文章,很詳細易懂。
利用 useStateuseEffect 的 狀態監控 hook,來選擇渲染的原件。
監控瀏覽器長寬 - 以React hook實現

不過樓下那個套件感覺更方便使用!
乍看之下兩個元件是一樣的。
要看你的元件功能樣式才能決定最好的寫法~

我要發表回答

立即登入回答