[React]製作可重用Navbar Component

2025/02/02 更新2021/02/03 發佈閱讀 2 分鐘

接續上一篇，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

#React

留言

Vic Lin的沙龍

20會員

161內容數

Vic Lin的沙龍的其他內容

2023/08/13

Vue 3.2 defineEmits 用法

父元件傳遞方法使用@ <template> ... <Login @modalClose="modalClose"/> ... </template> <script setup> const _modal = ref(); function m

2023/08/13

Vue 3.2 defineEmits 用法

父元件傳遞方法使用@ <template> ... <Login @modalClose="modalClose"/> ... </template> <script setup> const _modal = ref(); function m

2023/03/25

ASRock AMD DeskMini X300 超高CP自組筆記

前情提要由於我的筆電已經用了10年，無法再戰下去了，且有預算考量，加上使用電腦幾乎都是定點，只有偶爾回家的時候會需要攜帶，因此最終選擇了迷你電腦，體積小不占空間，又方便攜帶，剛好符合我的需求。菜單由於這台無法裝獨顯，所以CPU的部分選擇 AMD R5 3400G(含Vega 11內

2023/03/25

ASRock AMD DeskMini X300 超高CP自組筆記

2023/03/10

Nuxt3 使用 useFetch 取得數據

Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045

2023/03/10

Nuxt3 使用 useFetch 取得數據

Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045

看更多

你可能也想看

k.S的量化投資

【深度解讀】打破百萬門檻迷思：小資族如何透過「債券孳息」打造優於定存的美元現金流？

債券投資，不只是高資產族群的遊戲在傳統的投資觀念中，海外債券（Overseas Bonds）常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻，讓許多想尋求穩定配息的小資族望而卻步。然而，在股市波動劇烈的環境下，尋求穩定的美元現金流與被動收入成為許多投資人

#玉山證券#海外債券#債券孳息

2026/02/06

k.S的量化投資

【深度解讀】打破百萬門檻迷思：小資族如何透過「債券孳息」打造優於定存的美元現金流？

#玉山證券#海外債券#債券孳息

2026/02/06

Jorge2006的沙龍

玉山證券小額債—川普又來報明牌啦!

透過川普的近期債券交易揭露，探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響，以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺，如何讓小資族也能低門檻參與海外債券市場，實現「低門檻、低波動、固定收益」的務實投資方式。

2026/03/13

2026/03/13

拒絕梭哈投資，建立財務餘裕｜玉山證券小額債為你打造資產穩定錨

解析「債券」如何成為資產配置中的穩定錨，提供低風險高回報的投資選項。藉由玉山證券的低門檻債券服務，投資者可輕鬆入手，平衡風險並穩定財務。

#投資#資產配置#債券投資

2026/03/13

CK On Board

拒絕梭哈投資，建立財務餘裕｜玉山證券小額債為你打造資產穩定錨

#投資#資產配置#債券投資

2026/03/13

小芝女看天下

任何人都能投資！用玉山證券小額債替自己存旅費：1,000 美元就能開始的穩健理財法

相較於波動較大的股票，債券能提供固定現金流，而玉山證券推出的小額債，更以1000 美元的低門檻，讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色，大幅降低投資難度，對於希望分散風險、建立穩定現金流的人來說，玉山小額債是一個值得嘗試的理財起點。

#玉山小額債#小額債#玉山證券

2026/02/12

小芝女看天下

任何人都能投資！用玉山證券小額債替自己存旅費：1,000 美元就能開始的穩健理財法

#玉山小額債#小額債#玉山證券

2026/02/12

Hogan｜軟體工程師沙龍

React Props – React 白話文運動 09

React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解，前幾篇也學會了如何建立一個 React 元件，並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念，包含了：React 元件宣告、React Props。

#軟體#程式語言#JavaScript

2023/12/30

Hogan｜軟體工程師沙龍

React Props – React 白話文運動 09

#軟體#程式語言#JavaScript

2023/12/30

JayLinXR

學習React.js - 如何開發一個組件(Component)

React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分

#學習#程式#軟體工程師

2023/05/18

JayLinXR

學習React.js - 如何開發一個組件(Component)

React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分

#學習#程式#軟體工程師

2023/05/18

Vic Lin的沙龍

Next.js 入門

安裝設置: 安裝完成後，專案目錄結構如下: 執行$ npm run dev 可直接透過http://localhost:3000進入首頁，對應到pages/index.js。 Prod記得每次要先build再start: Example: SSG: 透過外部api取得資料建立靜態頁面結論:

2022/05/03

2022/05/03

React Hooks onclick call a callback function

React Hook onclick call a callback function with params, and change css style example: 本筆記參考: 1. https://www.codegrepper.com/code-examples/javascrip

#ReactHooks#React

2021/10/04

Vic Lin的沙龍

React Hooks onclick call a callback function

React Hook onclick call a callback function with params, and change css style example: 本筆記參考: 1. https://www.codegrepper.com/code-examples/javascrip

#ReactHooks#React

2021/10/04

Vic Lin的沙龍

Getting Started with React Hooks

Create React App 提供了快速建立React App環境的方法: 1. 安裝node.js 2. 建立React project: $ npx create-react-app my-app 3. 啟動app $ cd my-app $ npm start npm start之後即打

#Reactjs#ReactHooks

2021/09/28

Vic Lin的沙龍

Getting Started with React Hooks

Create React App 提供了快速建立React App環境的方法: 1. 安裝node.js 2. 建立React project: $ npx create-react-app my-app 3. 啟動app $ cd my-app $ npm start npm start之後即打

#Reactjs#ReactHooks

2021/09/28

You 的沙龍

HTML.CSS學習筆記01

01-選擇器寫法圖片來源：自己擷取電腦螢幕 1.可以下.main .img .hot span 控制到a 下面的兩個span 也可以省略成下 .hot span 只要整個html不容易相撞到相同的class就可以 2.也可以下.hot .title 就單純控制span class=＂t

2021/04/10

2021/04/10

[React]製作可重用Navbar Component

接續上一篇，navbar元件其實寫的不是很好，還不能說是可真正reuse，我們把程式改成這樣，透過props傳入navbar的items，定義好navbar title, li的href/name/active等等，就可以達到navbar元件無須改code就能重用的目的! Navbar 元件中用m

#React

2021/02/03

Vic Lin的沙龍

[React]製作可重用Navbar Component

#React

2021/02/03

Vic Lin的沙龍

用最簡單的範例，10分鐘入門React!

本文章目的是希望可以用最簡單的範例，來讓大家了解React到底是什麼東西，有什麼好處，並且套用bootstrap的navbar，加上自己客製的css，來達到component重用的目的! 用React來開發網頁，必須把目標拆解成一個個component，最後組合起來就成為一個網站! 假如我們目標是要

2021/02/02

2021/02/02

追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News