Header组件热门搜索栏的实现示例

更新时间：2023年04月27日 16:12:23 作者：JoernLee

这篇文章主要为大家介绍了Header组件热门搜索栏的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

1. 基本布局

本次任务是实现热门搜索模块的布局和展示控制功能。

1.1 热门搜索框

在布局过程中，我们发现热门搜索框并没有出现。这可能是由于外部组件存在 overflow: hidden 属性导致的，因此我们需要给一个高度解决这个问题：

cssCopy code
export const SearchInfo = styled.div`
  position: absolute;
  left: 0;
  top: 56px;
  width: 240px;
  height: 100px;
  padding: 0 20px;
  background: green;
`;

接下来，我们通过简书官网调试的方法补全其他属性。

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;
`;

然后需要实现换一换的功能。

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;
`;

但是此时发现高度出了问题了，因此我们需要在外层布局进行修改：

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 区域应该在鼠标聚焦时显示，失去焦点时隐藏。我们可以通过控制 SearchInfo 区域来实现这个逻辑，而且这个控制逻辑与之前用于控制动画的控制参数非常相似。

3. 使用 Ajax 请求获取 Tag 数据

实际上，热门 Tag 的数据是从服务器获取的。我们希望通过 Ajax 来获取这些数据，就像简书网站一样。而且我们只需要在第一次聚焦时获取数据，然后进行本地缓存。

此时，我们需要将 header 中的列表内容进行存储，以便后续进行状态管理。初始时，它是一个空数组。

3.1 使用 redux-thunk 返回函数

当 Nav 聚焦时，我们需要获取 Ajax 数据。由于这是一个异步操作，所以需要使用第三方库。我们统一使用 redux-thunk 进行操作，将异步操作放在 action 中处理。

应该在创建 store 时使用 redux-thunk：

接下来，我们需要派发异步 action：

然后创建这个 Action：

如果需要使用 Ajax，则需要使用第三方库 axios 来实现异步请求：

import axios from 'axios';
export const getList = () => { return (dispatch) => { // 异步请求 axios.get('/api/headerList.json').then(()=>{
    }).catch(()=>{
        console.log('error');
    });
}
};

当后端数据还未开发完成时，我们可以使用前端制作的假数据。我们可以使用 create-react-app 的特性，在 public 和 src 目录下创建一个对应的 JSON 文件，然后就可以访问了。在此期间，路由也需要进行修改，以便实现假数据。

然后，我们需要修改 state。我们需要在回调中派发一个新的 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 的数组进行 state 统一更新

接下来，我们需要在 reducer 中根据获取的 data 更新 list。但是有一点需要注意：我们使用 fromJS() 方法将 list 变成了一个 Immutable 数组。但是，当我们调用 state.set() 方法去改变 list 时，action.data 本身是一个普通的数组，这两种数据类型不同会出现错误。因此，我们需要将 data 转换为 Immutable：

然后，我们可以按如下方式编写 reducer：

3.3 使用 map 方法循环展示内容

最后，需要将数据展示出来。可以使用 map 方法来遍历数组，并渲染列表项：

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 数组，也可以使用 map 方法进行遍历。

4. 优化 reducer

之前的 reducer 大量使用 if 语句，可以通过使用 switch-case 进行优化：

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组件热门搜索栏的实现示例的详细内容，更多关于Header组件热门搜索栏的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

解决配置setupProxy.js代理,页面报错404问题
这篇文章主要介绍了解决配置setupProxy.js代理,页面报错404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
使用React手写一个对话框或模态框的方法示例
这篇文章主要介绍了使用React手写一个对话框或模态框的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
react-native android状态栏的实现
这篇文章主要介绍了react-native android状态栏的实现，使状态栏颜色与App颜色一致，使用户界面更加整体。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
在 React 项目中全量使用 Hooks的方法
这篇文章主要介绍了在 React 项目中全量使用 Hooks,使用 Hooks 能为开发提升不少效率，但并不代表就要抛弃 Class Component，依旧还有很多场景我们还得用到它，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
react-native中ListView组件点击跳转的方法示例
ListView作为React Native的核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表。下面这篇文章主要给大家介绍了关于react-native中ListView组件点击跳转的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09
React受控组件与非受控组件实例分析讲解
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧
2023-01-01
React组件的应用介绍
React组件分为函数组件与class组件；函数组件是无状态组件，class称为类组件；函数组件只有props，没有自己的私有数据和生命周期函数；class组件有自己私有数据(this.state) 和生命周期函数
2022-09-09
详解React hooks组件通信方法
这篇文章主要介绍了React hooks组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react hooks中常用的父子、跨组件通信的方法，需要的朋友可以参考下
2022-07-07
React Diff原理深入分析
这篇文章主要介绍了React Diff原理的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
2021-04-04
react-native组件中NavigatorIOS和ListView结合使用的方法
这篇文章主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-09-09