微信公众号首发
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22
2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23
3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24
4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25
5、React第三方组件1(路由管理之Router的使用⑤按需加载-下)---2018.01.26
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
既然我们都用上了路由了，那么之前demo1，demo2等页面就不需要了！
我们把他们删除，然后统一合并到demo页面中！
修改 config -> entry -> entry.js
let entry = [
{
name:'index',
path:'index/Index.jsx',
title:'首页',
keywords:'首页,xxx',
description:'这是我们的首页'
},
{
name:'shop',
path:'shop/Index.jsx',
title:'商城',
keywords:'商城,xxx',
description:'这是我们的商城'
},
{
name:'demo',
path:'demo/Index.jsx',
title:'演示',
keywords:'演示,xxx',
description:'这是我们的演示'
}
];
module.exports = entry;
demo文件夹中，新建Index.jsx
我们再来改造下整个工程，让他更符合多页面应用！
新建 Header.jsx
import Reactfrom 'react';
import '../../public/css/common.pcss'
class Headerextends React.Component {
constructor(props) {
super(props);
this.state = {};
this.pathname =window.location.pathname
}
handleNavClassName(name,index) {
if (this.pathname.indexOf(name +'.html') !== -1) {
return "selected"
}else {
return null
}
}
componentDidMount() {
}
render() {
return (
);
}
}
export default Header;
这里多了个 common.pcss 样式文件
i{
display:inline-block;
background-size:contain;
}
#app {
> .header {
border-bottom:1px solid #ccc;
margin-bottom:20px;
.ico-header-logo {
width:100px;
height:100px;
background-image:url("../img/ico-header-logo.png");
}
.nav {
a{
margin-right:10px;
color:blue;
&.selected{
color:#f00000;
}
}
}
}
> .footer {
border-top:1px solid #ccc;
margin-top:20px;
.ico-footer-logo {
width:240px;
height:130px;
background-image:url("../img/ico-footer-logo.png");
}
}
}
这里面有 两张图片，你们自己选取两张，放到 img 文件夹中
新建Footer.jsx
import Reactfrom 'react';
class Footerextends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
}
render() {
return (
);
}
}
export default Footer;
然后再 修改 entryBuild.js文件
const entryContent = (data) => {
return(
`import React from 'react';
import ReactDOM from 'react-dom';
import Index from '../app/component/${data.path}';
import Header from '../app/component/common/Header';
import Footer from '../app/component/common/Footer';
ReactDOM.render([,,],document.getElementById('app'));`
)
};
然后执行
npm run devNew
这里只有三个入口文件了
然后修改下 index 下的 Index.jsx文件
import Reactfrom 'react';
import Secondsfrom '../common/Seconds'
import '../../public/css/index.pcss'
const Index = () =>;
export default Index;
修改 common 下的 Seconds.jsx
render() {
let state =this.state;
return (
{/*这里我写了三中传值方法*/}
);
}
修改 common 下的 SecondsTop.jsx
import Reactfrom 'react';
const SecondsTop = ({title}) =>
这是{title}
;
export default SecondsTop;
然后执行
npm run dev
不出意外！浏览器效果应该是这样的！
我们把demo1，demo2两个页面内容用路由方式放到 demo演示页面中。
修改 demo 下的 Index.jsx
import Reactfrom 'react';
import {HashRouter, Route, NavLink,Redirect}from 'react-router-dom'
import Dome1 from '../demo/demo1/Index'
import Dome2 from '../demo/demo2/Index'
import '../../public/css/demo.pcss'
const Index = () =>
demo1
demo2
render={() => ()}/>
;
export default Index;
内面多了个样式 demo.pcss
加个样式
.content{
height:500px;
.nav{
a{
color:blue;
margin-right:10px;
&.selected{
color:#f00000;
}
}
}
}
ok,我们看下浏览器效果
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
网友评论