重複**是混亂的根源！，本篇文章我們來繼續消滅重複**。
細心的同學應該能發現：每乙個page元件（/src/pages下的元件）的render方法都擁有相似的jsx結構，比如：
render ()
每乙個頁面都包含乙個頁面的標題（header標籤和h1標籤），並且頁面的主要部分都被放在了乙個main標籤中。
現在很多**的設計都是如此：大部分頁面都有相似的header和footer，不同的是中間部分的內容。
既然是這些部分都是相似的，那麼在每乙個地方都重複寫一遍就顯得太沒水平了，stupid！
怎麼用乙份**來渲染這些相同的地方，並且也能夠滿足不同的頁面之間一些差異化的配置呢（如本文中各頁面標題不同）？
傳統的mvc web應用可以通過模板引擎的模板頁（layout）來達到這樣的效果。
使用react，我們可以使用布局元件來解決這個問題。
新建/src/layouts目錄用來存放布局元件，新建homelayout.js檔案：
/*** 布局元件
*/import react from 'react';
class homelayout extends react.component = this.props;
return (
);}}
export default homelayout;
我們把每個頁面中通用的部分提取到了homelayout元件中，在homelayout中使用props.title來維護頁面的標題文字。
使用props.children來渲染每個頁面特有的內容部分。
現在我們可以這樣來渲染homepage：
使用者列表新增使用者
homelayout裡面的內容會作為homelayout的props.children渲染到最終的頁面上。
...import homelayout from '../layouts/homelayout';
class home extends react.component
}...
...import homelayout from '../layouts/homelayout';
class useradd extends react.component
render ()
}...
...import homelayout from '../layouts/homelayout';
class userlist extends react.component
componentwillmount ()
render ()
}...
現在我們已經把3個頁面元件的重複部分使用homelayout來替代了，是不是覺得**又變得乾淨了很多呢？
Vue2 0 實戰專案 六 Vuex
最近進入了乙個新專案組，前端框架選擇vue進行開發，資料的狀態管理選擇用vuex。本篇隨筆中的 採用vuex官網提供的購物車案例。index.html main.js api shop.js 抽取出api請求 components cart.vue 購物車元件 productlist.vue 產品元...
vue專案實戰（二）之首頁layout布局
先填充簡單的顯示內容 將main.js檔案修改如下 import vue from vue import router from router import layout from components layout vue.config.productiontip false new vue te...
專案實戰中的布局技巧，垂直居中
flexbox中實現水平垂直居中 在flexbox布局模組中，不管是單行還是多行，要讓它們在容器中水平垂直居中都是件易事，而且方法也有多種。最常見的是在flex容器上設定對齊方式，在flex專案上設定margin auto。先來看在flex容器上設定對齊方式。flex容器和flex專案上設定對齊方式...