国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[譯]基于 React Router 4 的可復(fù)用 Layout 組件

用戶83 / 778人閱讀

摘要：通過向組件提供屬性，我們可以控制屬性的渲染。在這種情況下，我們將其包含在包含頁眉和頁腳的中，但這可能只是把其他組件做了簡單的分組。僅此而已短小精悍。的新版本專注于使用組件模型，而這些組件可以非常簡單的組合在一起。

本文翻譯自：Reusing layouts in React Router v4

在 React Router V4 應(yīng)用中，希望在每個路由上呈現(xiàn)一些默認(rèn)的組件，比如頁眉和頁腳：


  

    Page Header
  

  

    {content that changes}
  

  

    Page Footer

在最新版本的 React Router V4 中可以很容易實現(xiàn)這一點，通過為特定的用例創(chuàng)建子布局。

創(chuàng)建默認(rèn)布局

我們把每個頁面都使用的布局作為默認(rèn)布局。當(dāng)頁面路由和地址欄匹配的時候，React router 會調(diào)用 render 屬性的函數(shù)：

// 調(diào)用組件的常規(guī)方式


// 使用 render 屬性可以最組件做一些自定義操作
 } />

這是非常有用的，因為我們可以把這些組件放到 中，然后控制哪些組件應(yīng)該被渲染，同時把 Route 的屬性傳遞給子組件：

const DefaultLayout = ({component: Component, ...rest}) => {
  return (
     (
      

        
Header

          
        
Footer

      

    )} />
  )
};

rest 參數(shù)包含了需要傳遞給 DefaultLayout 的除了 component 以外的所有屬性，所以我們可以把這些屬性從 Route 轉(zhuǎn)發(fā)到底層組件。

通過向 Route 組件提供 render 屬性，我們可以控制 component 屬性的渲染。在這種情況下，我們將其包含在包含頁眉和頁腳的 HTML 中，但這可能只是把其他組件做了簡單的分組。matchProps 是 Route 渲染時的另一個屬性。

一個非常重要的注意點是把 component 組件重新命名為 Component，因為它會影響 JSX 如何轉(zhuǎn)換我們的代碼：


// 轉(zhuǎn)換為
React.createElement("component", null); // 不是我們需要的


// 轉(zhuǎn)換為
React.createElement(Component, null); // 現(xiàn)在，這是一個 React 組件

閱讀 facebook 官方文檔 "用戶自定義組件必須是大寫字母開頭" 獲取更多信息。

擴(kuò)展默認(rèn)布局

我們的默認(rèn)布局已經(jīng)包含了在每個頁面上的需要共享的組件，可能有時候我們還要為某個視圖添加某些特定組件，例如博客的帖子。解決這個問題的一個方法是創(chuàng)建 DefaultLayout 然后只為那些新頁面添加特定組件：

const PostLayout = ({component: Component, ...rest}) => {
  return (
     (
      

        

          
        

        

          
        

      

    )} />
  );
};

唯一的區(qū)別是將函數(shù)傳遞給 component 屬性而不是 render 屬性。您可以根據(jù)需要自由擴(kuò)展布局。

僅此而已

短小精悍。

React Router 的新版本專注于使用 React 組件模型，而這些組件可以非常簡單的組合在一起。

查看這個 GitHub issue，可以看看對于使用不同的默認(rèn)布局的討論。

React Router V4 文檔中文翻譯 正在進(jìn)行中。。。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82379.html

相關(guān)文章

  • 從無到有-在create-react-app基礎(chǔ)上接入react-router、redux-saga

    摘要：將所有的需要鑒權(quán)的頁面放在例如下，只有在有微信相關(guān)鑒權(quán)的信息存在，才允許訪問接下來的界面，否則，容器內(nèi)甚至可以直接不渲染接下來的界面。而接下來的則是把路由導(dǎo)向至了一個微信端專用的。 搭建項目框架 新建項目 執(zhí)行如下代碼，用create-react-app來建立項目的基礎(chǔ)框架，然后安裝需要用到的依賴。 $ npx create-react-app my-test-project $ cd...

    褰辯話 評論0 收藏0

  • React結(jié)合TypeScript和Mobx初體驗

    摘要：結(jié)合編輯器可以推導(dǎo)變量對應(yīng)的類型以及內(nèi)部的結(jié)構(gòu)，提高代碼的健壯性和可維護(hù)性。通過充分利用時間回溯的特征，可以增強(qiáng)業(yè)務(wù)的可預(yù)測性與錯誤定位能力。對于對象的哪部分需要成為可觀察的，提供了細(xì)粒度的控制。 showImg(https://segmentfault.com/img/bVba6Ts?w=1218&h=525); 為什么要使用TypeScript 偵測錯誤 通過靜態(tài)類型檢測可以盡早檢...

    dreambei 評論0 收藏0

  • React Server Render

    摘要：當(dāng)我們在瀏覽器端進(jìn)行切換切換的時候，頁面是不刷新的，通過請求獲取到數(shù)據(jù)，重新渲染結(jié)構(gòu)。如果想在實際開發(fā)中使用，有幾個問題不得不面對對開發(fā)者的要求高，至少要熟悉，，特別是組件的構(gòu)建，如何提高復(fù)用率這些都是要在前期思考的。 概述 一直想用React做些東西，苦于沒有實際項目練手，所以一直都是自己在搞些小玩意兒，做過用React Router構(gòu)建的內(nèi)部訂餐系統(tǒng)，是個SPA，也在社區(qū)分享過。由...

    boredream 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<