本教程总共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 React from 'react'; import '../../public/css/common.pcss' class Header extends 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 ( <div className="header"> <i className="ico-header-logo"/> <div className="nav"> <a href="/index.html" className={this.handleNavClassName('index',1)}>首页</a> <a href="/shop.html" className={this.handleNavClassName('shop')}>商城</a> <a href="/demo.html" className={this.handleNavClassName('demo')}>demo演示</a> </div> </div> ); } } 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 React from 'react'; class Footer extends React.Component { constructor(props) { super(props); this.state = {}; } componentDidMount() { } render() { return ( <div className="footer"> <i className="ico-footer-logo"/> </div> ); } } 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([<Header key="Header"/>,<Index key="Index"/>,<Footer key="Footer"/>],document.getElementById('app'));` ) };
然后执行
npm run devNew
这里只有三个入口文件了
然后修改下 index 下的 Index.jsx文件
import React from 'react'; import Seconds from '../common/Seconds' import '../../public/css/index.pcss' const Index = () => <Seconds title="首页"/>; export default Index;
修改 common 下的 Seconds.jsx
render() { let state = this.state; return ( <div className="cont"> <SecondsTop {...this.props} /> {/*这里我写了三中传值方法*/} <SecondsBottom {...state}/> </div> ); }
修改 common 下的 SecondsTop.jsx
import React from 'react'; const SecondsTop = ({title}) => <div className="top"> 这是{title} </div> ; export default SecondsTop;
然后执行
npm run dev
不出意外!浏览器效果应该是这样的!
我们把demo1,demo2两个页面内容用路由方式放到 demo演示页面中。
修改 demo 下的 Index.jsx
import React from '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 = () => <HashRouter> <div className="content"> <div className="nav"> <NavLink to="/Dome1" activeClassName="selected" exact>demo1</NavLink> <NavLink to="/Dome2" activeClassName="selected">demo2</NavLink> </div> <Route exact path="/" render={() => (<Redirect to="/Dome1"/>)}/> <Route path="/Dome1" component={Dome1}/> <Route path="/Dome2" component={Dome2}/> </div> </HashRouter> ; export default Index;
内面多了个样式 demo.pcss
加个样式
.content{ height: 500px; .nav{ a{ color: blue; margin-right: 10px; &.selected{ color: #f00000; } } } }
ok,我们看下浏览器效果
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!