热门搜索样式布局

我们来做，点击搜索栏，弹出“热门搜索” 的框子。

我们先在 src/common/header/index.js 中写上这个组件( SearchInfo )，如下。

    import {
      HeaderWrapper,
      Logo,
      Nav,
      NavItem,
      NavSearch,
      Addition,
      Button,
      SearchWrapper,
      SearchInfo
   } from './style';
  
   ...

        <SearchWrapper>
          <CSSTransition
            in={props.focused}
            timeout={200}
            classNames="slide"
          >
            <NavSearch
              placeholder="搜索"
              className={props.focused ? "focused" : ""}
              onFocus={props.handleFocus}
              onBlur={props.handleBlur}
            ></NavSearch>
          </CSSTransition>
          <span
            className={props.focused ? "focused iconfont" : "iconfont"}
          >&#xe623;</span>
          <SearchInfo></SearchInfo>
        </SearchWrapper>

然后，打开 src/common/header/style.js ，写一下SearchInfo 组件。如下。

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

好的，我们再到 src/common/header/index.js 中给这个组件加一些内容。如下。

        <SearchWrapper>
          <CSSTransition
            in={props.focused}
            timeout={200}
            classNames="slide"
          >
            <NavSearch
              placeholder="搜索"
              className={props.focused ? "focused" : ""}
              onFocus={props.handleFocus}
              onBlur={props.handleBlur}
            ></NavSearch>
          </CSSTransition>
          <span
            className={props.focused ? "focused iconfont" : "iconfont"}
          >&#xe623;</span>
          <SearchInfo>
            <SearchInfoTitle>
              热门搜索
              <SearchInfoSwitch>换一批</SearchInfoSwitch>
            </SearchInfoTitle>
            <div>
              <SearchInfoItem>教育</SearchInfoItem>
              <SearchInfoItem>植物</SearchInfoItem>
              <SearchInfoItem>食物</SearchInfoItem>
            </div>
          </SearchInfo>
        </SearchWrapper>

然后这些新增组件的样式，如下。

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

export const SearchInfoTitle = 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 SearchInfoItem = styled.a`
  display: block;
  float: left;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 0 5px;
  line-height: 20px;
  font-size: 12px;
  color: #969696;
`;

然后呢，我们根据 props 的focus 属性，决定是否出现这个框。如下。

import React from 'react';
import {connect} from 'react-redux';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWrapper,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoItem
} from './style';
import '../../statics/iconfont/iconfont.css';
import { CSSTransition } from 'react-transition-group';
import { actionCreators } from './store';

const getListArea = (show) => {
  if (show) {
    return (
      <SearchInfo>
            <SearchInfoTitle>
              热门搜索
              <SearchInfoSwitch>换一批</SearchInfoSwitch>
            </SearchInfoTitle>
            <div>
              <SearchInfoItem>教育</SearchInfoItem>
              <SearchInfoItem>植物</SearchInfoItem>
              <SearchInfoItem>食物</SearchInfoItem>
              <SearchInfoItem>花朵</SearchInfoItem>
              <SearchInfoItem>水</SearchInfoItem>
              <SearchInfoItem>江河</SearchInfoItem>
              <SearchInfoItem>天空</SearchInfoItem>
              <SearchInfoItem>尘埃</SearchInfoItem>
            </div>
          </SearchInfo>
    )
  } else {
    return null;
  }
};

const Header = (props) => {
  return (
    <HeaderWrapper>
      <Logo href='/'/>
      <Nav>
        <NavItem className='left active'>首页</NavItem>
        <NavItem className='left'>下载</NavItem>
        <NavItem className='right'>登录</NavItem>
        <NavItem className='right'>
          <span className="iconfont">&#xe636;</span>
        </NavItem>
        <SearchWrapper>
          <CSSTransition
            in={props.focused}
            timeout={200}
            classNames="slide"
          >
            <NavSearch
              placeholder="搜索"
              className={props.focused ? "focused" : ""}
              onFocus={props.handleFocus}
              onBlur={props.handleBlur}
            ></NavSearch>
          </CSSTransition>
          <span
            className={props.focused ? "focused iconfont" : "iconfont"}
          >&#xe623;</span>
          {getListArea(props.focused)}
        </SearchWrapper>
      </Nav>
      <Addition>
      <Button className='writting'>
        <span className="iconfont">&#xe63a;</span>
        写文章
      </Button>
        <Button className='reg'>注册</Button>
      </Addition>
    </HeaderWrapper>
  )
}

const mapStateToProps = (state) => {
  return {
    focused: state.get("header").get("focused")
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleFocus () {
      dispatch(actionCreators.searchFocus());
    },
    handleBlur () {
      dispatch(actionCreators.searchBlur());
    }

  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);

Done.