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

Navbar 元件中用m

職場產業

創作

觀點

<div class="draft-block draft--p left">接續上一篇，navbar元件其實寫的不是很好，還不能說是可真正reuse，我們把程式改成這樣，透過props傳入navbar的items，定義好navbar title, li的href/name/active等等，就可以達到navbar元件無須改code就能重用的目的!</div>
<div class="draft--imgNormal draft-block"><div><div style="height:621px" class="image-block-prerender" data-src="https://images.vocus.cc/767dbee4-b00d-43a5-855d-60afdf4e5bc3.jpg" data-width="621" data-height="398" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">Navbar 元件中用map來loop，判斷到active是Y則加入active class。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:768px" class="image-block-prerender" data-src="https://images.vocus.cc/30e60f8a-6abc-4e9a-b050-00b38796c4b5.jpg" data-width="768" data-height="701" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">如此一來，這個navbar component未來在其他專案我可以直接拿來重用，只要從外部傳入定義好的項目，不管要幾個，href指到哪，哪些要active，背景要換什麼顏色，通通都可以做到!<br>上一篇為了簡單化，是直接寫死html在navbar元件裡面。</div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">成果畫面:</span></div>
<div class="draft--imgNormal draft-block"><div><div style="height:1918px" class="image-block-prerender" data-src="https://images.vocus.cc/c2948fe5-e72f-40ed-aa08-d9fd047eaa12.jpg" data-width="1918" data-height="1038" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">Source code:</span></div>
<div class="embed-block-prerender" data-type="vocus" data-url="https://github.com/snailsmall612/react-hello-world-ex2"></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"><span style="font-style: italic; ">本筆記參考:<br>1. </span><a href="https://stackoverflow.com/questions/47616355/react-foreach-in-jsx" target="_blank" class="draft--a"><span style="font-style: italic; ">https://stackoverflow.com/questions/47616355/react-foreach-in-jsx</span></a><span style="font-style: italic; "><br>2. </span><a href="https://stackoverflow.com/questions/31883601/passings-array-as-props-in-reactjs" target="_blank" class="draft--a"><span style="font-style: italic; ">https://stackoverflow.com/questions/31883601/passings-array-as-props-in-reactjs</span></a></div>

<p>接續上一篇，navbar元件其實寫的不是很好，還不能說是可真正reuse，我們把程式改成這樣，透過props傳入navbar的items，定義好navbar title, li的href/name/active等等，就可以達到navbar元件無須改code就能重用的目的!</p>
<p><br></p>
<p>Navbar 元件中用map來loop，判斷到active是Y則加入active class。</p>
<p><br></p>
<p>如此一來，這個navbar component未來在其他專案我可以直接拿來重用，只要從外部傳入定義好的項目，不管要幾個，href指到哪，哪些要active，背景要換什麼顏色，通通都可以做到!<br>
上一篇為了簡單化，是直接寫死html在navbar元件裡面。</p>
<p><br></p>
<p><strong>成果畫面:</strong></p>
<p><br></p>
<p><strong>Source code:</strong></p>
<figure>E</figure>
<p><br></p>
<p><em>本筆記參考:<br>
1. </em><a href="https://stackoverflow.com/questions/47616355/react-foreach-in-jsx"><em>https://stackoverflow.com/questions/47616355/react-foreach-in-jsx</em></a><em><br>
2. </em><a href="https://stackoverflow.com/questions/31883601/passings-array-as-props-in-reactjs"><em>https://stackoverflow.com/questions/31883601/passings-array-as-props-in-reactjs</em></a></p>

接續上一篇，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元件裡面。

Contribute to snailsmall612/react-hello-world-ex2 development by creating an account on GitHub.

snailsmall612/react-hello-world-ex2

本筆記參考:
1. https://stackoverflow.com/questions/47616355/react-foreach-in-jsx
2. https://stackoverflow.com/questions/31883601/passings-array-as-props-in-reactjs

[React]製作可重用Navbar Component

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