9.热门搜索样式布局19-06-11

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第11次提交
1.在Search的<SearchWrapper>标签下添加热门搜索样式布局
先添加最外层的样式 <SearchInfo>
并添加布局

export const SearchInfo = styled.div`
  position: absolute;
  left: 0;
  top: 56px;
  width: 240px;
  padding: 0 20px;
  box-shadow: 0 0 8px rgba(0,0,0,.2);
`;

然后添加各个小组件

<SearchInfo>
      <SearchInfoTittle>
        热门搜索
        <SearchInfoSwitch>换一批</SearchInfoSwitch>
      </SearchInfoTittle>
      <SearchInfoList>
        <SearchInfoItem>教育</SearchInfoItem>
        <SearchInfoItem>区块链</SearchInfoItem>
        <SearchInfoItem>理财</SearchInfoItem>
        <SearchInfoItem>小程序</SearchInfoItem>
        <SearchInfoItem>flutter</SearchInfoItem>
        <SearchInfoItem>美食</SearchInfoItem>
        <SearchInfoItem>Vue</SearchInfoItem>
      </SearchInfoList>
    </SearchInfo>

export const SearchInfoTittle = styled.div`
  margin-top: 20px;
  margin-bottom: 15px;
  line-height: 20px;
  font-size: 14px;
  color: #969696;
`;
export const SearchInfoSwitch = styled.span`
  float: right;
  font-size: 13px;
`;
export const SearchInfoList = styled.div`
  overflow: hidden;
`
export const SearchInfoItem = styled.a`
  display: block;
  float: left;
  line-height: 20px;
  padding: 0 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  border: 1px solid #ddd;
  color: #787878;
  border-radius: 3px;
`;

2.写一个GetListArea方法将这些标签写进去

const getListArea = (show) => {
//show值是调用时传过来的判断热门搜索栏是否展开的
  if(show){
    return(
    <SearchInfo>
      <SearchInfoTittle>
        热门搜索
        <SearchInfoSwitch>换一批</SearchInfoSwitch>
      </SearchInfoTittle>
      <SearchInfoList>
        <SearchInfoItem>教育</SearchInfoItem>
        <SearchInfoItem>区块链</SearchInfoItem>
        <SearchInfoItem>理财</SearchInfoItem>
        <SearchInfoItem>小程序</SearchInfoItem>
        <SearchInfoItem>flutter</SearchInfoItem>
        <SearchInfoItem>美食</SearchInfoItem>
        <SearchInfoItem>Vue</SearchInfoItem>
      </SearchInfoList>
    </SearchInfo>
    )
  }else {
    return null;
  }
}

并在<SearchWrapper>中调用这个方法

 {getListArea(props.focused)}
//这里show值传的是props.focused，即搜索框展开时热门搜索弹出