React第三方组件1

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

letentry = [

{

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

importReactfrom'react';

import'../../public/css/common.pcss'

classHeaderextendsReact.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(

首页

商城

demo演示

);

}

}

export defaultHeader;

这里多了个 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

importReactfrom'react';

classFooterextendsReact.Component {

constructor(props) {

super(props);

this.state= {};

}

componentDidMount() {

}

render() {

return(

);

}

}

export defaultFooter;

然后再 修改 entryBuild.js文件

constentryContent= (data) => {

return(

`import React from 'react';

import ReactDOM from 'react-dom';

import Index from '../app/component/$';

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文件

importReactfrom'react';

importSecondsfrom'../common/Seconds'

import'../../public/css/index.pcss'

constIndex= () =>;

export defaultIndex;

修改 common 下的 Seconds.jsx

render() {

letstate =this.state;

return(

{/*这里我写了三中传值方法*/}

);

}

修改 common 下的 SecondsTop.jsx

importReactfrom'react';

constSecondsTop= () =>

这是

;

export defaultSecondsTop;

然后执行

npm run dev

不出意外！浏览器效果应该是这样的！

我们把demo1，demo2两个页面内容用路由方式放到 demo演示页面中。

修改 demo 下的 Index.jsx

importReactfrom'react';

import{HashRouter,Route,NavLink,Redirect}from'react-router-dom'

importDome1from'../demo/demo1/Index'

importDome2from'../demo/demo2/Index'

import'../../public/css/demo.pcss'

constIndex= () =>

demo1

demo2

render={() => ()}/>

;

export defaultIndex;

内面多了个样式 demo.pcss

加个样式

.content{

height:500px;

.nav{

a{

color:blue;

margin-right:10px;

&.selected{

color:#f00000;

}

}

}

}

ok,我们看下浏览器效果

本文完

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!