Header組件熱門搜索欄的實現(xiàn)示例
1. 基本布局
本次任務(wù)是實現(xiàn)熱門搜索模塊的布局和展示控制功能。
1.1 熱門搜索框
在布局過程中,我們發(fā)現(xiàn)熱門搜索框并沒有出現(xiàn)。這可能是由于外部組件存在 overflow: hidden
屬性導致的,因此我們需要給一個高度解決這個問題:
cssCopy code export const SearchInfo = styled.div` position: absolute; left: 0; top: 56px; width: 240px; height: 100px; padding: 0 20px; background: green; `;
接下來,我們通過簡書官網(wǎng)調(diào)試的方法補全其他屬性。
1.2 熱門搜索Title和換一換圖標
接下來,我們需要添加熱門搜索Title和換一換圖標。
cssCopy code export const SearchInfoTitle = styled.div` margin-top: 20px; margin-bottom: 15px; line-height: 20px; font-size: 14px; color: #969696; `;
然后需要實現(xiàn)換一換的功能。
1.3 熱門Tag
我們還需要添加熱門Tag的樣式:
cssCopy code export const SearchInfoItem = styled.a` display: block; float: left; line-height: 20px; padding: 0 5px; font-size: 12px; border: 1px solid #ddd; color: #969696; border-radius: 2px; margin-right: 10px; margin-bottom: 15px; `;
但是此時發(fā)現(xiàn)高度出了問題了,因此我們需要在外層布局進行修改:
cssCopy code export const SearchWrapper = styled.div` position: relative; float: left; .iconfont { position: absolute; right: 5px; bottom: 5px; width: 30px; height: 30px; line-height: 30px; border-radius: 15px; text-align: center; &.focused { background: #777; color: #fff; } } .slide-enter { transition: all 0.2s ease-out; } .slide-enter-active { width: 240px; } .slide-exit { transition: all 0.2s ease-out; } .slide-exit-active { width: 160px; } `; export const SearchInfo = styled.div` position: absolute; left: 0; top: 56px; width: 240px; padding: 0 20px; background: green; `;
同時,我們將上面 SearchInfo
寫死的高度去掉。
2. 控制展示
官方文檔描述了 SearchInfo 區(qū)域應(yīng)該在鼠標聚焦時顯示,失去焦點時隱藏。我們可以通過控制 SearchInfo 區(qū)域來實現(xiàn)這個邏輯,而且這個控制邏輯與之前用于控制動畫的控制參數(shù)非常相似。
3. 使用 Ajax 請求獲取 Tag 數(shù)據(jù)
實際上,熱門 Tag 的數(shù)據(jù)是從服務(wù)器獲取的。我們希望通過 Ajax 來獲取這些數(shù)據(jù),就像簡書網(wǎng)站一樣。而且我們只需要在第一次聚焦時獲取數(shù)據(jù),然后進行本地緩存。
此時,我們需要將 header 中的列表內(nèi)容進行存儲,以便后續(xù)進行狀態(tài)管理。初始時,它是一個空數(shù)組。
3.1 使用 redux-thunk 返回函數(shù)
當 Nav 聚焦時,我們需要獲取 Ajax 數(shù)據(jù)。由于這是一個異步操作,所以需要使用第三方庫。我們統(tǒng)一使用 redux-thunk 進行操作,將異步操作放在 action 中處理。
應(yīng)該在創(chuàng)建 store 時使用 redux-thunk:
接下來,我們需要派發(fā)異步 action:
然后創(chuàng)建這個 Action:
如果需要使用 Ajax,則需要使用第三方庫 axios 來實現(xiàn)異步請求:
import axios from 'axios'; export const getList = () => { return (dispatch) => { // 異步請求 axios.get('/api/headerList.json').then(()=>{ }).catch(()=>{ console.log('error'); }); } };
當后端數(shù)據(jù)還未開發(fā)完成時,我們可以使用前端制作的假數(shù)據(jù)。我們可以使用 create-react-app 的特性,在 public 和 src 目錄下創(chuàng)建一個對應(yīng)的 JSON 文件,然后就可以訪問了。在此期間,路由也需要進行修改,以便實現(xiàn)假數(shù)據(jù)。
然后,我們需要修改 state。我們需要在回調(diào)中派發(fā)一個新的 action:
const changeList = (data) => ({ type: constants.CHANGE_LIST, data }); export const getList = () => { return (dispatch) => { // 異步請求 axios.get('/api/headerList.json').then((res) => { const data = res.data; dispatch(changeList(data.data)) }).catch(()=>{ console.log('error'); }); } };
3.2 使用 Immutable 的數(shù)組進行 state 統(tǒng)一更新
接下來,我們需要在 reducer 中根據(jù)獲取的 data 更新 list。但是有一點需要注意:我們使用 fromJS() 方法將 list 變成了一個 Immutable 數(shù)組。但是,當我們調(diào)用 state.set() 方法去改變 list 時,action.data 本身是一個普通的數(shù)組,這兩種數(shù)據(jù)類型不同會出現(xiàn)錯誤。因此,我們需要將 data 轉(zhuǎn)換為 Immutable:
然后,我們可以按如下方式編寫 reducer:
3.3 使用 map 方法循環(huán)展示內(nèi)容
最后,需要將數(shù)據(jù)展示出來??梢允褂?map 方法來遍歷數(shù)組,并渲染列表項:
javascriptCopy code getListArea(show) { if (show) { return ( <SearchInfo> <SearchInfoTitle> 熱門搜索 <SearchInfoSwitch> 換一批 </SearchInfoSwitch> </SearchInfoTitle> <SearchInfoList> {this.props.list.map((item) => { return <SearchInfoItem key={item}>{item}</SearchInfoItem>; })} </SearchInfoList> </SearchInfo> ); } else { return null; } }
即使是使用 immutable 數(shù)組,也可以使用 map 方法進行遍歷。
4. 優(yōu)化 reducer
之前的 reducer 大量使用 if 語句,可以通過使用 switch-case 進行優(yōu)化:
cCopy code export default (state = defaultState, action) => { switch (action.type) { case constants.SEARCH_FOCUS: return state.set('focused', true); case constants.SEARCH_BLUR: return state.set('focused', false); case constants.CHANGE_LIST: return state.set('list', action.data); default: return state; } };
使用 switch-case 可以讓 reducer 代碼更加清晰易懂。
以上就是Header組件熱門搜索欄的實現(xiàn)示例的詳細內(nèi)容,更多關(guān)于Header組件熱門搜索欄的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
react-router JS 控制路由跳轉(zhuǎn)實例
這篇文章主要介紹了react-router JS 控制路由跳轉(zhuǎn)實例,react實現(xiàn)路由可以直接使用react-router。有興趣的可以了解一下2017-06-06react中關(guān)于Context/Provider/Consumer傳參的使用
這篇文章主要介紹了react中關(guān)于Context/Provider/Consumer傳參的使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09如何在 React 中調(diào)用多個 onClick 函數(shù)
這篇文章主要介紹了如何在React中調(diào)用多個onClick函數(shù),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11React通過redux-persist持久化數(shù)據(jù)存儲的方法示例
這篇文章主要介紹了React通過redux-persist持久化數(shù)據(jù)存儲的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02TypeScript在React項目中的使用實踐總結(jié)
這篇文章主要介紹了TypeScript在React項目中的使用總結(jié),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-04-04