[React]製作可重用Navbar Component

閱讀時間約 1 分鐘
接續上一篇,navbar元件其實寫的不是很好,還不能說是可真正reuse,我們把程式改成這樣,透過props傳入navbar的items,定義好navbar title, li的href/name/active等等,就可以達到navbar元件無須改code就能重用的目的!
Navbar 元件中用map來loop,判斷到active是Y則加入active class。
如此一來,這個navbar component未來在其他專案我可以直接拿來重用,只要從外部傳入定義好的項目,不管要幾個,href指到哪,哪些要active,背景要換什麼顏色,通通都可以做到!
上一篇為了簡單化,是直接寫死html在navbar元件裡面。
成果畫面:
Source code:
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
發表第一個留言支持創作者!
Vic Lin的沙龍 的其他內容
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
在select的時候發現回傳的primary key都是0,這時可能是因為primary key為非數字,如果沒有在model定義 auto increment是false, 預設會認為是true,所以要在model中多設定這行: public $incrementing = false; 本筆
1. 進入https://notify-bot.line.me/zh_TW/ 登入line後,點選右上角個人頁面 2. 點選發行權杖, 輸入名稱與要接收通知的群組。 按下發行後,複製token。 3. 記得將LINE Notify這個帳號加入該群組中: 4. 使用curl發送訊息: curl
直接從程式碼來看,假設code這樣寫: $this->customer->select(['id']) ->where('cell_1', '=', $cell_1) ->orWhere(function ($query) use ($cell_2) {  $query->whereNotNull
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
在select的時候發現回傳的primary key都是0,這時可能是因為primary key為非數字,如果沒有在model定義 auto increment是false, 預設會認為是true,所以要在model中多設定這行: public $incrementing = false; 本筆
1. 進入https://notify-bot.line.me/zh_TW/ 登入line後,點選右上角個人頁面 2. 點選發行權杖, 輸入名稱與要接收通知的群組。 按下發行後,複製token。 3. 記得將LINE Notify這個帳號加入該群組中: 4. 使用curl發送訊息: curl
直接從程式碼來看,假設code這樣寫: $this->customer->select(['id']) ->where('cell_1', '=', $cell_1) ->orWhere(function ($query) use ($cell_2) {  $query->whereNotNull
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
此篇主要紀錄PWA開發過程心得,內容為PWA有什麼特色,為何React可以使PWA成為接近App的操作體驗,以概念敘述與簡單開發流程紀錄來介紹PWA。 什麼是漸進式網路應用程式(PWA) PWA擁有傳統網頁和移動應用的優點,使網頁應用程序可以像應用程序一樣運行,提供更加優越的用戶體驗
React Hooks 是 React 16.8 中引入的一組新的 API,允許你在函數組件中使用狀態和其他 React 特性,而不需要寫類組件。 狀態管理: useState 鉤子允許在函數組件中添加狀態。 副作用管理: useEffect 鉤子允許處理副作用,如數據獲取、訂閱和手動 DO
06. React Forms: Dynamically Add New Input Fields On Click || Learn React Through Mini Projects
Thumbnail
在現代的前端開發中,有許多優秀的框架可供選擇,其中包括Angular、React和Vue.js。這些前端框架都擁有自己獨特的特點和優勢,但在選擇合適的框架時可能會感到困惑。本文將介紹Angular、React和Vue.js這三個常見的前端框架的特點和優勢,並分析各個框架的使用情境和適用範圍。
Thumbnail
近日,歐盟官方公報發佈了法規(EU)2023/1132,對REACH法規 (EC) No 1907/2006 附件XVII限制物質清單進行修訂,以適應CLP法規的最新變化。 根據附件XVII中第28、29和30條,被歸類為致癌、致突變、致生殖毒性(CMR)1A類和1B類的物質,禁止投放於市場或供應普
Thumbnail
歐盟委員會(ECHA)於2021年和2022年修訂了REACH下化學品註冊的部分資訊要求。自2023年5月1日起,ECHA將開始根據修訂後的要求檢查每一份新註冊和現有註冊的更新。
Thumbnail
2022年11月29日,英國官方公開了“UK-REACH緩衝期延長”公眾諮詢的結果:根據公眾諮詢的結果,經蘇格蘭和威爾士政府同意,英國環境、食品和鄉村事務部(Defra)將提出二級立法,將UK-REACH註冊提交截止日期延長3年。
Thumbnail
Zustand是什麼?React前端狀態管理 分別講解狀態管理以及Zustand 是什麼?接續下來講解Zustand用法以及Context以及Redux的比較。
Thumbnail
ECHA(歐洲化學品管理局)正式對外公告,稱其在卷宗評估階段可能會考慮註冊人的噸位變化,也就是說在合理的條件下,註冊人在收到卷宗評估草案(draft decision)後可嘗試通過下調噸位來規避一些高噸位的資料增補要求。
Thumbnail
2022年6月22日, 歐洲化學品管理局(ECHA)委員會宣佈,已選定Sharon McGuinness博士為下一任歐洲化學品管理局局長。作為任命程式的一部分,Sharon McGuinness博士暫定於7月4日將在歐洲議會上發表聲明。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
此篇主要紀錄PWA開發過程心得,內容為PWA有什麼特色,為何React可以使PWA成為接近App的操作體驗,以概念敘述與簡單開發流程紀錄來介紹PWA。 什麼是漸進式網路應用程式(PWA) PWA擁有傳統網頁和移動應用的優點,使網頁應用程序可以像應用程序一樣運行,提供更加優越的用戶體驗
React Hooks 是 React 16.8 中引入的一組新的 API,允許你在函數組件中使用狀態和其他 React 特性,而不需要寫類組件。 狀態管理: useState 鉤子允許在函數組件中添加狀態。 副作用管理: useEffect 鉤子允許處理副作用,如數據獲取、訂閱和手動 DO
06. React Forms: Dynamically Add New Input Fields On Click || Learn React Through Mini Projects
Thumbnail
在現代的前端開發中,有許多優秀的框架可供選擇,其中包括Angular、React和Vue.js。這些前端框架都擁有自己獨特的特點和優勢,但在選擇合適的框架時可能會感到困惑。本文將介紹Angular、React和Vue.js這三個常見的前端框架的特點和優勢,並分析各個框架的使用情境和適用範圍。
Thumbnail
近日,歐盟官方公報發佈了法規(EU)2023/1132,對REACH法規 (EC) No 1907/2006 附件XVII限制物質清單進行修訂,以適應CLP法規的最新變化。 根據附件XVII中第28、29和30條,被歸類為致癌、致突變、致生殖毒性(CMR)1A類和1B類的物質,禁止投放於市場或供應普
Thumbnail
歐盟委員會(ECHA)於2021年和2022年修訂了REACH下化學品註冊的部分資訊要求。自2023年5月1日起,ECHA將開始根據修訂後的要求檢查每一份新註冊和現有註冊的更新。
Thumbnail
2022年11月29日,英國官方公開了“UK-REACH緩衝期延長”公眾諮詢的結果:根據公眾諮詢的結果,經蘇格蘭和威爾士政府同意,英國環境、食品和鄉村事務部(Defra)將提出二級立法,將UK-REACH註冊提交截止日期延長3年。
Thumbnail
Zustand是什麼?React前端狀態管理 分別講解狀態管理以及Zustand 是什麼?接續下來講解Zustand用法以及Context以及Redux的比較。
Thumbnail
ECHA(歐洲化學品管理局)正式對外公告,稱其在卷宗評估階段可能會考慮註冊人的噸位變化,也就是說在合理的條件下,註冊人在收到卷宗評估草案(draft decision)後可嘗試通過下調噸位來規避一些高噸位的資料增補要求。
Thumbnail
2022年6月22日, 歐洲化學品管理局(ECHA)委員會宣佈,已選定Sharon McGuinness博士為下一任歐洲化學品管理局局長。作為任命程式的一部分,Sharon McGuinness博士暫定於7月4日將在歐洲議會上發表聲明。