使用React + Redux + Syled-components 實(shí)現(xiàn)彼愛網(wǎng)站頭部

先上效果
效果.gif

不得不說，這個(gè)效果雖然比較簡單，實(shí)現(xiàn)起來卻一步一個(gè)坑。

一開始我是采用yoman腳手架搭建react項(xiàng)目，之后安裝Redux 和 Syled-components ，它卻報(bào)錯(cuò)React.createContext is not a function 經(jīng)過一段時(shí)間的百度后，我發(fā)現(xiàn) yoman腳手架安裝的react是15.0.0版本，這個(gè)版本沒有React.createContext 這個(gè)方法。之后我修改package.json 的react版本號，重新安裝依賴包。
安裝好依賴包后 開啟項(xiàng)目 又報(bào)錯(cuò)because its MIME type ('text/html') is not executable, and strict MIME type
又花了我大量的時(shí)間去百度，發(fā)現(xiàn)yoman腳手架搭建的服務(wù)器js文件設(shè)置了一個(gè)響應(yīng)頭，導(dǎo)致無法請求到j(luò)s文件。 沒法 我放棄了yoman腳手架，使用官方推薦的create-react-app 來搭建項(xiàng)目。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 (
<HeaderContainer>
<HeaderMiddle>
<HeaderLeft>
<HeaderLogo>
<HeaderLogoImg />
</HeaderLogo>
<HeaderNews>
<i className="iconfont"></i>
<News>
<New className={this.props.active==1? 'active':''}>彼愛(BiiB): http://www.biib.cn</New>
<New className={this.props.active==2? 'active':''}>官方Email: biib@biib.cn</New>
<New className={this.props.active==3? 'active':''}>客服QQ: 43105579</New>
</News>
</HeaderNews>
</HeaderLeft>
<HeaderNav>
<HeaderNavUl>
<HeaderNavLi>彼愛</HeaderNavLi>
<HeaderNavLi>說說</HeaderNavLi>
<HeaderNavLi>
讀讀
<i className="iconfont"></i>
<NavContainer className="navChild1">
<NavUl>
<NavLi>談天說地</NavLi>
<NavLi>彼愛無岸</NavLi>
<NavLi>人在旅途</NavLi>
<NavLi>完美生活</NavLi>
</NavUl>
</NavContainer>
</HeaderNavLi>
<HeaderNavLi>
找找
<i className="iconfont"></i>
<NavContainer className="navChild2">
<NavUl>
<NavLi>美圖欣賞</NavLi>
<NavLi>歲月留聲</NavLi>
<NavLi>光影時(shí)代</NavLi>
</NavUl>
</NavContainer>
</HeaderNavLi>
<HeaderNavLi>收收</HeaderNavLi>
<HeaderNavLi>問問</HeaderNavLi>
<HeaderNavLi>鏈鏈</HeaderNavLi>
<HeaderNavLi>想想</HeaderNavLi>
</HeaderNavUl>
</HeaderNav>
</HeaderMiddle>
</HeaderContainer>
)
}
}
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 (
<ImgContainer>
<ImgLi className={this.props.bgactive==1? 'active bg1' : 'bg1'}/>
<ImgLi className={this.props.bgactive==2? 'active bg2' : 'bg2'}/>
<ImgLi className={this.props.bgactive==3? 'active bg3' : 'bg3'}/>
</ImgContainer>
)
}
}

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; }

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容