11.热门搜索样式布局

1.先看一下我们需要完成的东西
当我们点击搜索框时，出现热门搜索中这些样式，当不点击时不出现

2.首先，我们定义一个方法getListArea，将热门搜索里面的内容样式包含在里面：

const getListArea = (show) => {
    if(show){
        return (
            <SearchInfo>
            <SearchInfoTitle>
             热门搜索
            <SearchInfoSwitch>换一批</SearchInfoSwitch>
            </SearchInfoTitle>
            <SearchInfoList>
                <SearchInfoItem>教育</SearchInfoItem>
                <SearchInfoItem>简书</SearchInfoItem>
                <SearchInfoItem>生活</SearchInfoItem>
                <SearchInfoItem>投稿</SearchInfoItem>
                <SearchInfoItem>历史</SearchInfoItem>
                <SearchInfoItem>PHP</SearchInfoItem>
                <SearchInfoItem>考研</SearchInfoItem>
                <SearchInfoItem>docker</SearchInfoItem>
                <SearchInfoItem>EOS</SearchInfoItem>
                <SearchInfoItem>微信小程序</SearchInfoItem>
            </SearchInfoList>
        </SearchInfo>)
    } else {
        
    }
}

3.将focused值做为参数传入
完整代码：
header下的index.js

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

const getListArea = (show) => {
    if(show){
        return (
            <SearchInfo>
            <SearchInfoTitle>
             热门搜索
            <SearchInfoSwitch>换一批</SearchInfoSwitch>
            </SearchInfoTitle>
            <SearchInfoList>
                <SearchInfoItem>教育</SearchInfoItem>
                <SearchInfoItem>简书</SearchInfoItem>
                <SearchInfoItem>生活</SearchInfoItem>
                <SearchInfoItem>投稿</SearchInfoItem>
                <SearchInfoItem>历史</SearchInfoItem>
                <SearchInfoItem>PHP</SearchInfoItem>
                <SearchInfoItem>考研</SearchInfoItem>
                <SearchInfoItem>docker</SearchInfoItem>
                <SearchInfoItem>EOS</SearchInfoItem>
                <SearchInfoItem>微信小程序</SearchInfoItem>
            </SearchInfoList>
        </SearchInfo>)
    } else {
        
    }
}
class Header extends Component{
    render() {
        return (
            <HeadrerWrapper>
                <Logo href='/' />
                <Nav>
                    <NavItem className='left active'>首页</NavItem>
                    <NavItem className='left'>下载App</NavItem>
                    <NavItem className='right'>登录</NavItem>
                    <NavItem className='right'>
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            in={this.props.focused}
                            timeout={200}
                            classNames="slide"
                        >
                        <NavSearch 
                            className={this.props.focused ? 'focused' : ''}
                            onFocus={this.props.handleInputFocus}
                            onBlur={this.props.handleInputBlur}
                        ></NavSearch>
                        </CSSTransition>
                        <i className={this.props.focused ? 'focused iconfont' : 'iconfont'}>&#xe62d;</i>
                        {/*调用getListArea方法，如果聚焦显示*/}
                        {getListArea(this.props.focused)}
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <Button className='writting'>
                    <i className="iconfont">&#xe601;</i>
                        写文章</Button>
                    <Button className='reg'>注册</Button>
                </Addition>
            </HeadrerWrapper>
        )
    }
}
//mapStateToProps：组件和store做连接的时候，store数据映射如何到props上
const mapStateToProps = (state)=>{
    return {
        //将store中的focused映射到组件里面
        //focused: state.get('header').get('focused')
        //还可以通过getIn方法获取到focused
        focused:state.getIn(['header','focused'])
    }
}
//组件想要改变store的内容需要调用的方法
const mapDispathToProps = (dispath)=>{
    return{
        handleInputFocus(){
            // const action = {
            //     type:'search_focus'
            // }
            const action = actionCreators.searchFocus();
            dispath(action);
        },
        handleInputBlur() {
            // const action ={
            //     type:'search_blur'
            // }
            const action = actionCreators.searchBlur();
            dispath(action);
        }
    }
}

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

style.js代码：

import styled from 'styled-components'
import logoPic from '../../statics/logo.png'
export const HeadrerWrapper = styled.div`
    position:relative;
    height:56px;
    border-bottom:solid 1px #f0f0f0;
`;
export const Logo = styled.a`
    height:56px;
    width:100px;
    position:absolute;
    top:0;
    left:0;
    display:block;
    background:url(${logoPic});
    background-size:contain;
`;
export const Nav = styled.div`
    width:960px;
    height:100%;
    margin:0 auto;
    padding-right:60px;
    /*保证宽度不变*/
    box-sizing:border-box;
`;
export const NavItem = styled.div`
    line-height:56px;
    padding: 0 15px;
    font-size:17px;
    color:#333;
    &.left {
        float:left;
    }
    &.right {
        float:right;
        color:#969696;
    }
    &.active {
        color:#ea6f5a;
    }
    `;
export const SearchWrapper = styled.div`
    float:left;
    position:relative;
    .iconfont{
        position:absolute;
        right:5px;
        bottom:5px;
        width:30px;
        line-height:30px;
        border-radius:15px;
        text-align:center;
        &.focused{
            background:#777;
            color:#fff;
        }
    }
`;
export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
    width:160px;
    height:38px;
    border:none;
    outline:none;
    border-radius:19px;
    background:#eee;
    margin-top:9px;
    margin-left:20px;
    padding:0 30px 0 20px;
    box-sizing:border-box;
    font-size:14px;
    color:#666;
    /*当前组件下的placeholder*/
    &::placeholder{
        color:#999;
    }
    &.focused{
        width:240px;
    };
    .slide-enter{
        width:160px;
        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:220px;
  
    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 SearchInfoList = styled.div`
    overflow:hidden;
`;
export const SearchInfoItem = styled.a`
    display:block;
    float:left;
    line-height: 20px;
    font-size: 12px;
    padding: 0 5px;
    margin-right:10px;
    margin-bottom:15px;
    border:1px solid #ddd;
    color:#787878;
    border-radius:3px;
`;
export const Addition = styled.div`
    position:absolute;
    right:0;
    top: 0;
    height:56px;
 ` ;

export const Button = styled.button`
    float:right;
    margin-top:9px;
    margin-right:20px;
    padding:0 20px;
    line-height:38px;
    border-radius:19px;
    border:1px solid #ec6149;
    font-size:14px;
    &.reg{
        color:#ec6149;
        background:white;

    }
    &.writting{
        color:#fff;
        background:#ec6149;
    };
 `