如何使用React實現(xiàn)一個面包屑導(dǎo)航?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
創(chuàng)新互聯(lián)服務(wù)緊隨時代發(fā)展步伐,進行技術(shù)革新和技術(shù)進步,經(jīng)過十多年的發(fā)展和積累,已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計師、專業(yè)的網(wǎng)站實施團隊以及高素質(zhì)售后服務(wù)人員,并且完全形成了一套成熟的業(yè)務(wù)流程,能夠完全依照客戶要求對網(wǎng)站進行網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、建設(shè)、維護、更新和改版,實現(xiàn)客戶網(wǎng)站對外宣傳展示的首要目的,并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。什么是 React 高階組件
React 高階組件就是以高階函數(shù)的方式包裹需要修飾的 React 組件,并返回處理完成后的 React 組件。React 高階組件在 React 生態(tài)中使用的非常頻繁,比如react-router 中的 withRouter 以及 react-redux 中 connect 等許多 API 都是以這樣的方式來實現(xiàn)的。
使用 React 高階組件的好處
在工作中,我們經(jīng)常會有很多功能相似,組件代碼重復(fù)的頁面需求,通常我們可以通過完全復(fù)制一遍代碼的方式實現(xiàn)功能,但是這樣頁面的維護可維護性就會變得極差,需要對每一個頁面里的相同組件去做更改。因此,我們可以將其中共同的部分,比如接受相同的查詢操作結(jié)果、組件外同一的標簽包裹等抽離出來,做一個單獨的函數(shù),并傳入不同的業(yè)務(wù)組件作為子組件參數(shù),而這個函數(shù)不會修改子組件,只是通過組合的方式將子組件包裝在容器組件中,是一個無副作用的純函數(shù),從而我們能夠在不改變這些組件邏輯的情況下將這部分代碼解耦,提升代碼可維護性。
自己動手實現(xiàn)一個高階組件
前端項目里,帶鏈接指向的面包屑導(dǎo)航十分常用,但由于面包屑導(dǎo)航需要手動維護一個所有目錄路徑與目錄名映射的數(shù)組,而這里所有的數(shù)據(jù)我們都能從 react-router 的路由表中取得,因此我們可以從這里入手,實現(xiàn)一個面包屑導(dǎo)航的高階組件。
首先我們看看我們的路由表提供的數(shù)據(jù)以及目標面包屑組件所需要的數(shù)據(jù):
// 這里展示的是 react-router4 的route示例 let routes = [ { breadcrumb: '一級目錄', path: '/a', component: require('../a/index.js').default, items: [ { breadcrumb: '二級目錄', path: '/a/b', component: require('../a/b/index.js').default, items: [ { breadcrumb: '三級目錄1', path: '/a/b/c1', component: require('../a/b/c1/index.js').default, exact: true, }, { breadcrumb: '三級目錄2', path: '/a/b/c2', component: require('../a/b/c2/index.js').default, exact: true, }, } ] } ] // 理想中的面包屑組件 // 展示格式為 a / b / c1 并都附上鏈接 const BreadcrumbsComponent = ({ breadcrumbs }) => ( <div> {breadcrumbs.map((breadcrumb, index) => ( <span key={breadcrumb.props.path}> <link to={breadcrumb.props.path}>{breadcrumb}</link> {index < breadcrumbs.length - 1 && <i> / </i>} </span> ))} </div> );
標題名稱:如何使用React實現(xiàn)一個面包屑導(dǎo)航-創(chuàng)新互聯(lián)
鏈接URL:http://muchs.cn/article26/iphjg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、企業(yè)建站、用戶體驗、品牌網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容