Vic Lin的沙龍

[React]製作可重用Navbar Component

Vic Lin-avatar-img
Vic Lin
更新於 發佈於 閱讀時間約 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:
本筆記參考:
1. https://stackoverflow.com/questions/47616355/react-foreach-in-jsx
2. https://stackoverflow.com/questions/31883601/passings-array-as-props-in-reactjs
為什麼會看到廣告
avatar-img
Vic Lin的沙龍
21會員
161內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者！
Vic Lin的沙龍 的其他內容
用最簡單的範例，10分鐘入門React!
本文章目的是希望可以用最簡單的範例，來讓大家了解React到底是什麼東西，有什麼好處，並且套用bootstrap的navbar，加上自己客製的css，來達到component重用的目的! 用React來開發網頁，必須把目標拆解成一個個component，最後組合起來就成為一個網站! 假如我們目標是要
#React
React Hello World
接續上一篇，這邊要來寫一個React hello world app，最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
#React
React webpack 開發環境安裝
React開發有兩種方式，一種是使用CDN方式include react的官方lib，然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等，還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生，就是為了解決上述的問題，
#webpack#React
Laravel select primary key return 0
在select的時候發現回傳的primary key都是0，這時可能是因為primary key為非數字，如果沒有在model定義 auto increment是false, 預設會認為是true，所以要在model中多設定這行: public $incrementing = false; 本筆
#Laravel
使用 Line Notify API 對群組進行通知
1. 進入https://notify-bot.line.me/zh_TW/ 登入line後，點選右上角個人頁面 2. 點選發行權杖, 輸入名稱與要接收通知的群組。 按下發行後，複製token。 3. 記得將LINE Notify這個帳號加入該群組中: 4. 使用curl發送訊息: curl
#LineNotify
Laravel ORM where中加入括號
直接從程式碼來看，假設code這樣寫: $this->customer->select(['id']) ->where('cell_1', '=', $cell_1) ->orWhere(function ($query) use ($cell_2) { 　$query->whereNotNull
#Laravel
用最簡單的範例，10分鐘入門React!
本文章目的是希望可以用最簡單的範例，來讓大家了解React到底是什麼東西，有什麼好處，並且套用bootstrap的navbar，加上自己客製的css，來達到component重用的目的! 用React來開發網頁，必須把目標拆解成一個個component，最後組合起來就成為一個網站! 假如我們目標是要
#React
React Hello World
接續上一篇，這邊要來寫一個React hello world app，最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
#React
React webpack 開發環境安裝
React開發有兩種方式，一種是使用CDN方式include react的官方lib，然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等，還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生，就是為了解決上述的問題，
#webpack#React
Laravel select primary key return 0
在select的時候發現回傳的primary key都是0，這時可能是因為primary key為非數字，如果沒有在model定義 auto increment是false, 預設會認為是true，所以要在model中多設定這行: public $incrementing = false; 本筆
#Laravel
使用 Line Notify API 對群組進行通知
1. 進入https://notify-bot.line.me/zh_TW/ 登入line後，點選右上角個人頁面 2. 點選發行權杖, 輸入名稱與要接收通知的群組。 按下發行後，複製token。 3. 記得將LINE Notify這個帳號加入該群組中: 4. 使用curl發送訊息: curl
#LineNotify
Laravel ORM where中加入括號
直接從程式碼來看，假設code這樣寫: $this->customer->select(['id']) ->where('cell_1', '=', $cell_1) ->orWhere(function ($query) use ($cell_2) { 　$query->whereNotNull
#Laravel
你可能也想看
Google News 追蹤
avatar-avatar
閒水鴨的沙龍
Thumbnail
連媽媽都會用！輕鬆養成專屬自己的質感金融生活圈
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用！ 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
#國泰世華銀行#國泰世華#國泰世華CUBEApp
avatar-avatar
Joker Cat
Thumbnail
React - 資料驅動建立版型
此筆記僅以個人理解方式記錄 環境準備 我們這邊以 Bootstrap 5 的卡片元件來展示，要準備的有： Bootstrap 5 CDN Card(卡片) template React CDN React React 起手式，引用 CDN、綁定 root、指定渲染 dom。 <
#React#學習#六角學院
avatar-avatar
Web開發日誌
Thumbnail
簡單聊聊，我為什麼又多下載react跟tailwind使用
先從react開始： 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
#程式#React#TailwindCSS
avatar-avatar
鱈魚的魚缸
Thumbnail
Vue reactive 使用筆記
到底要用 ref 還是 reactive 是一個很常見的問題，不過現在官方文檔推薦使用 ref 就行，所以也不是甚麼大問題就是了。( •̀ ω •́ )✧ 所以 reactive 真的沒用用途了嗎？這篇文章來記錄一下 reactive 的用法。
#vue#前端
avatar-avatar
Michelle Chen的沙龍
Thumbnail
客製化長相的UINavigationBarController
本文介紹如何使用UINavigationBarAppearance調整四種場景下的UI外觀，並探討客製化返回鍵UI又保留返回手勢的做法，可以有效地客製化NavigationBar的外觀，並避免一些NG作法。
#iOS#NavigationController#UINavigationBar
avatar-avatar
s_SoNg的沙龍
功能能開關setter和getter
setter和getter能把狀態改變時需做的事情包裝起來，讓外部只需簡單修改參數就能達到預想的效果
#JavaScript#React#Setter
avatar-avatar
Follow the Rainmaker 🌧️
React Hook
React Hooks 是 React 16.8 中引入的一組新的 API，允許你在函數組件中使用狀態和其他 React 特性，而不需要寫類組件。 狀態管理： useState 鉤子允許在函數組件中添加狀態。 副作用管理： useEffect 鉤子允許處理副作用，如數據獲取、訂閱和手動 DO
avatar-avatar
Follow the Rainmaker 🌧️
React Forms
06. React Forms: Dynamically Add New Input Fields On Click || Learn React Through Mini Projects
avatar-avatar
Follow the Rainmaker 🌧️
React Hook - useContext
07. React useContext Hook (User Context Example) || Learn React Through Mini Projects
avatar-avatar
s_SoNg的沙龍
Thumbnail
React ViewRerender架構
在程式任何地方都能修改各種react組件狀態的做法分享
avatar-avatar
閒水鴨的沙龍
Thumbnail
連媽媽都會用！輕鬆養成專屬自己的質感金融生活圈
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用！ 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
#國泰世華銀行#國泰世華#國泰世華CUBEApp
avatar-avatar
Joker Cat
Thumbnail
React - 資料驅動建立版型
此筆記僅以個人理解方式記錄 環境準備 我們這邊以 Bootstrap 5 的卡片元件來展示，要準備的有： Bootstrap 5 CDN Card(卡片) template React CDN React React 起手式，引用 CDN、綁定 root、指定渲染 dom。 <
#React#學習#六角學院
avatar-avatar
Web開發日誌
Thumbnail
簡單聊聊，我為什麼又多下載react跟tailwind使用
先從react開始： 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
#程式#React#TailwindCSS
avatar-avatar
鱈魚的魚缸
Thumbnail
Vue reactive 使用筆記
到底要用 ref 還是 reactive 是一個很常見的問題，不過現在官方文檔推薦使用 ref 就行，所以也不是甚麼大問題就是了。( •̀ ω •́ )✧ 所以 reactive 真的沒用用途了嗎？這篇文章來記錄一下 reactive 的用法。
#vue#前端
avatar-avatar
Michelle Chen的沙龍
Thumbnail
客製化長相的UINavigationBarController
本文介紹如何使用UINavigationBarAppearance調整四種場景下的UI外觀，並探討客製化返回鍵UI又保留返回手勢的做法，可以有效地客製化NavigationBar的外觀，並避免一些NG作法。
#iOS#NavigationController#UINavigationBar
avatar-avatar
s_SoNg的沙龍
功能能開關setter和getter
setter和getter能把狀態改變時需做的事情包裝起來，讓外部只需簡單修改參數就能達到預想的效果
#JavaScript#React#Setter
avatar-avatar
Follow the Rainmaker 🌧️
React Hook
React Hooks 是 React 16.8 中引入的一組新的 API，允許你在函數組件中使用狀態和其他 React 特性，而不需要寫類組件。 狀態管理： useState 鉤子允許在函數組件中添加狀態。 副作用管理： useEffect 鉤子允許處理副作用，如數據獲取、訂閱和手動 DO
avatar-avatar
Follow the Rainmaker 🌧️
React Forms
06. React Forms: Dynamically Add New Input Fields On Click || Learn React Through Mini Projects
avatar-avatar
Follow the Rainmaker 🌧️
React Hook - useContext
07. React useContext Hook (User Context Example) || Learn React Through Mini Projects
avatar-avatar
s_SoNg的沙龍
Thumbnail
React ViewRerender架構
在程式任何地方都能修改各種react組件狀態的做法分享