【React全家桶入門之七】提取布局組件

2024-04-27 15:05:51

字體：大中小

來源：轉載

供稿：網友

是時候來優化一下我們的代碼了。

前面的文章提到過：重復代碼是混亂的根源！，本篇文章我們來繼續消滅重復代碼。

目標

細心的同學應該能發現：每一個Page組件（/src/pages下的組件）的render方法都擁有相似的jsx結構，比如：

render () { return ( <div> <header> <h1>...</h1> </header> <main> ... </main> </div> );}

每一個頁面都包含一個頁面的標題（header標簽和h1標簽），并且頁面的主要部分都被放在了一個main標簽中。

現在很多網站的設計都是如此：大部分頁面都有相似的header和footer，不同的是中間部分的內容。

既然是這些部分都是相似的，那么在每一個地方都重復寫一遍就顯得太沒水平了，stupid！

怎么用一份代碼來渲染這些相同的地方，并且也能夠滿足不同的頁面之間一些差異化的配置呢（如本文中各頁面標題不同）？

傳統的MVC Web應用可以通過模板引擎的模板頁（layout）來達到這樣的效果。

使用React，我們可以使用布局組件來解決這個問題。

布局組件

新建/src/layouts目錄用來存放布局組件，新建HomeLayout.js文件：

import React from 'react';class HomeLayout extends React.Component { render () { const {title, children} = this.PRops; return ( <div> <header> <h1>{title}</h1> </header> <main> {children} </main> </div> ); }}export default HomeLayout;

我們把每個頁面中通用的部分提取到了HomeLayout組件中，在HomeLayout中使用props.title來維護頁面的標題文本。

使用props.children來渲染每個頁面特有的內容部分。

現在我們可以這樣來渲染HomePage：

HomeLayout里面的內容會作為HomeLayout的props.children渲染到最終的頁面上。

重構頁面組件

主頁

...import HomeLayout from '../layouts/HomeLayout';class Home extends React.Component { render () { return ( <HomeLayout title="Welcome"> <Link to="/user/list">用戶列表</Link> <br/> <Link to="/user/add">添加用戶</Link> </HomeLayout> ); }}...

用戶添加頁面

...import HomeLayout from '../layouts/HomeLayout';class UserAdd extends React.Component { handleSubmit (e) { ... } render () { ... return ( <HomeLayout title="添加用戶"> <form onSubmit={(e) => this.handleSubmit(e)}> ... </form> </HomeLayout> ); }}...

用戶列表頁面

...import HomeLayout from '../layouts/HomeLayout';class UserList extends React.Component { constructor (props) { ... } componentWillMount () { ... } render () { ... return ( <HomeLayout title="用戶列表"> <table> ... </table> </HomeLayout> ); }}...

總結

現在我們已經把3個頁面組件的重復部分使用HomeLayout來替代了，是不是覺得代碼又變得干凈了很多呢？

請像潔癖一樣對待自己的代碼。

你以為頁面重構就到此為止了嗎？

現在每一個頁面都要先import HomeLayout組件，然后將頁面內容使用HomeLayout組件包裹起來。

如果你足夠“潔癖”，這里也應該成為你“清掃”的目標。

怎么做？

// /src/index.js...ReactDOM.render(( <Router history={hashHistory}> <Route path="/" component={HomeLayout> <Route path="/" component={HomePage}/> <Route path="/user/add" component={UserAddPage}/> <Route path="/user/list" component={UserListPage}/> </Route> </Router>), document.getElementById('app'));

我們可以給每個需要使用HomeLayout布局的頁面路由添加一個component為HomeLayout的父路由，其效果等同于：

當url為”/”：

當url為”/user/add”：

當url為”/user/list”：

HomeLayout將會根據當前的url從props.children接收到相應的組件內容。

這樣做可以解除每個頁面與HomeLayout之間的耦合，但也有一些問題：

title怎么辦？（使用react context api）有的頁面組件需要添加一個額外的根節點（如/src/pages/Home.js）

這里不再進行進一步的講解，自己動手試試？

上一篇：webpack之旅01-概述

下一篇：html學習筆記 3種doctype