請問react在一個頁面引用兩個相同的元件，請問是否有辦法設定讓這兩個元件一個在桌機時顯示，一個在手機時顯示?
目前小弟都是把元件分成兩個，但這樣感覺增加了好多元件
想請問是否有其他設定的方法
已邀請的邦友 {{ invite_list.length }}/5
兩個完全一樣的元件嗎?還是功能/樣式會有不同?
如果是兩個完全相同的元件那寫一個就好了吧?然後設定在桌機/手機時都顯示
如果是相同功能的元件，但樣式會隨著裝置大小不同，那就照螢幕尺寸去設定對應的樣式即可
ex:
return <Component className={ isMobile() ? MobileStyle : DesktopStyle } />
或是用 react-responsive 偵測去渲染不同元件
https://github.com/contra/react-responsive
希望這樣有回答到你的問題(?
一般情況我習慣使用 CSS RWD 來控制 手機與桌機的顯示
以 bootstrap 來說，就是
className="d-none d-md-block"
className="d-md-none"
而如果想依靠 React 來判斷裝置渲染元件的話，
可以 Andy Chang 寫的這篇文章，很詳細易懂。
利用 useState 與 useEffect 的 狀態監控 hook，來選擇渲染的原件。
監控瀏覽器長寬 - 以React hook實現
不過樓下那個套件感覺更方便使用！
乍看之下兩個元件是一樣的。
要看你的元件功能樣式才能決定最好的寫法～
iThome鐵人賽
看影片追技術