cssCopy codeexport SearchInfo

此次每日任务是促进热搜词模块规划布局展现控制系统。

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 方式来遍历数组，并3D渲染目录项：

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 编码更加清晰通俗易懂。