使用React + Redux + Syled-components 实现彼爱网站头部

先上效果

效果.gif

不得不说，这个效果虽然比较简单，实现起来却一步一个坑。

一开始我是采用yoman脚手架搭建react项目，之后安装Redux 和 Syled-components ，它却报错React.createContext is not a function 经过一段时间的百度后，我发现 yoman脚手架安装的react是15.0.0版本，这个版本没有React.createContext 这个方法。之后我修改package.json 的react版本号，重新安装依赖包。
安装好依赖包后 开启项目 又报错because its MIME type ('text/html') is not executable, and strict MIME type
又花了我大量的时间去百度，发现yoman脚手架搭建的服务器js文件设置了一个响应头，导致无法请求到js文件。 没法 我放弃了yoman脚手架，使用官方推荐的create-react-app 来搭建项目。ok 一切都正常了 开始编写代码

redux index.js 文件
import {
createStore
} from 'redux';
import reducer from './reducer.js';
const store = createStore(reducer);

export default store;

redux reducer.js 文件
const defaultState = {
active: 1,
bgactive: 1
};

export default (state = defaultState, action) => {
if (action.type == 'header_interval') {
if (state.active == 3) {
return {
active: 1,
bgactive: state.bgactive
}
} else {
return {
active: state.active + 1,
bgactive: state.bgactive
}
}
}
if (action.type == 'background_interval') {
if (state.bgactive == 3) {
return {
active: state.active,
bgactive: 1
}
} else {
return {
active: state.active,
bgactive: state.bgactive + 1
}
}
}
return state;
}

header.js文件
import React, {
Component,
} from 'react';
import {
connect
} from 'react-redux';
import {
HeaderContainer,
HeaderMiddle,
HeaderLeft,
HeaderLogo,
HeaderLogoImg,
HeaderNews,
News,
New,
HeaderNav,
HeaderNavUl,
HeaderNavLi,
NavContainer,
NavUl,
NavLi
} from './headerStyle.js';
class Header extends React.Component {
componentDidMount() {
this.props.setHeaderInterval();
}
render() {
return (









彼爱(BiiB): http://www.biib.cn
官方Email: [email protected]
客服QQ: 43105579





彼爱
说说

读读



谈天说地
彼爱无岸
人在旅途
完美生活




找找



美图欣赏
岁月留声
光影时代



收收
问问
链链
想想




)
}
}
const mapStateToProps = (state) => {
return {
active: state.active
}
}

const mapDispathToProps = (dispath) => {
return {
setHeaderInterval() {
setInterval(() => {
const action = {
type: 'header_interval'
}
dispath(action);
}, 2500)
}
}
}
export default connect(mapStateToProps, mapDispathToProps)(Header);

headerStyled.js 文件
import styled from 'styled-components';
import logoImgUrl from '../../img/logo.png';
export const HeaderContainer = styled.div position: fixed; top: 0; left: 0; width: 100%; height: 70px; background: ecf8fd; box-shadow: 0 0 5px #6dbcdf; box-sizing: border-box; background: #f3f5f6;

export const HeaderMiddle = styled.div margin: 0 auto; width: 1200px; height: 100%; position: relative;
export const HeaderLeft = styled.div position: relative; width: 40%; height: 100%;
export const HeaderLogo = styled.div width: 33%; height: 100%; display: flex; justify-content:center;
export const HeaderLogoImg = styled.a margin-left: 35px; margin-top: 10.5px; height: 43px; width: 105px; display: inline-block; background-image: url(${logoImgUrl}); background-size: 100% 100%;
export const HeaderNews = styled.div left: 34%; top: 25px; position: absolute; width: 67%; height: 25px; i{ position: absolute; cursor: pointer; margin-top: 4.5px; }
export const News = styled.ul position: absolute; left: 20px; top: 0; height: 25px; overflow:hidden; width: 80%;
export const New = styled.li transition: all 0.5s; width: 100%; height: 25px; line-height: 25px; color: #777; font-size: 12px; position: absolute; top: 25px; &.active{ top: 0; }
export const HeaderNav = styled.nav position: absolute; right: 0; top: 0; width: 60%; height 100%;
export const HeaderNavUl = styled.ul width: 100%; height: 70px; display: flex;
export const HeaderNavLi = styled.li flex: 1; line-height: 70px; text-align: center; color: #ff6700; font-size: 16px; transition: all 0.3s; cursor: pointer; &:hover{ font-size: 20px; color:#fff; background: #03a9f4; } &:hover .iconfont{ transform: rotate(-90deg); } &:hover .navChild1{ left: 180px; opacity: 1; display: block; } &:hover .navChild2{ left: 270px; opacity: 1; display: block; } .iconfont{ margin-left: 5px; display:inline-block; transform: rotate(90deg); transition: all 0.3s; }

export const NavContainer = styled.div transition: all 0.8s; display: none; top: 70px; left: -200px; opacity: 0; position: absolute; width: 150px; border: 1px solid #ddd; box-sizing: border-box; border-top:none; background: #fff; box-shadow: 2px 2px 8px #ccc;
export const NavUl = styled.ul `

export const NavLi = styled.li
width: 150px;
text-align: center;
line-height: 40px;
color: #ff6700;
font-size: 14px;
transition: all 0.3s;
box-sizing: border-box;
padding: 10px 0;
border-bottom: 1px solid #eee;
&:hover{
background: #03a9f4;
color: #fff;
font-size: 16px;
}
`

background.js 文件
import React, {
Component
} from 'react';
import {
connect
} from 'react-redux';
import {
ImgContainer,
ImgLi
} from './backgroundStyle.js'
class Background extends Component {
componentDidMount() {
this.props.setBgInterval();
}
render() {
return (





)
}
}

const mapStateToProps = (state) => {
return {
bgactive: state.bgactive
}
}

const mapDispathToProps = (dispath) => {
return {
setBgInterval() {
setInterval(() => {
const action = {
type: 'background_interval'
}
dispath(action)
}, 5000)
}
}
}

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

backgroundStyle.js 文件
import styled from 'styled-components';
import bg1 from '../../img/bg0.jpg';
import bg2 from '../../img/bg1.jpg';
import bg3 from '../../img/bg2.jpg';
export const ImgContainer = styled.ul width: 100%; height: 100%; position: relative;
export const ImgLi = styled.li width: 100%; height: 100%; position: absolute; left: 0; top: 0; &.bg1{ transition: all 0.8s; background-image: url(${bg1}); background-size: 100% 100%; opacity: 0; } &.bg2{ transition: all 0.8s; background-image: url(${bg2}); background-size: 100% 100%; opacity: 0; } &.bg3{ transition: all 0.8s; background-image: url(${bg3}); background-size: 100% 100%; opacity: 0; } &.active{ opacity: 1; }