前言
- 本人也是新手，刚开始研究学习react
- 初步搭建一个页面框架，没有用到特别高深的技术，其实是不会呀！哈哈
- 仅仅作为学习的记录，有写的不好的地方请见谅，如果有错误或者更好的建议可以留言，大家一起学习。
- 该笔记会不断更新，但是由于工作原因，可能更新的较慢，见谅。
正文
- 学习过程
就是官方文档、各种案例尝试写了一遍
- react配置和安装方式：create-react-app
采用的是create-react-app配置安装，并才考了一下文章进行初始化配置
文章地址：https://blog.csdn.net/Cress_zhang/article/details/80656707
代码环境
- 因为是第一次学习react，对全家桶不熟悉，所以，第一个项目暂时不会用到全家桶的其他组件，后续用上的时候会做说明。
使用组件：react+react-router4.0+antd
预览(暂时只是demo，静态的)
说明
- 由于没有使用全家桶，所以组件之间相互通信采用的是props和state。
- 由于对vuejs有简单的了解，所以在布局上请参看Appjs部分，页面布局保持App入口文件不变
- react-router4.0和2.x好像不太一样，网上大部分都是2.x的版本，因为本人也是刚开始学习，不太了解，看了一下文档后初步使用见根目录indexjs和router/index.js文件。
- 该demo仅供参考。
主要代码部分
相信看到该文档的各位，其实对react已经有了了解或者比较熟悉了。u 所以这里只是放一些主要的部分，其他部分请github上下载查看。
- index.js部分
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
import App from "./components/App/App";
import Login from "./components/login";
ReactDOM.render(
<div>
<Router>
<Switch>
<Route path="/login" component={Login} />
<Route path="/" component={App} />
</Switch>
</Router>
</div>
, document.getElementById('root')
);
registerServiceWorker();
- App.js部分
import React, { Component } from 'react';
import './App.css';
import { Layout,Icon } from 'antd';
import RouteConfig from './../../router/index'
import HomeMenu from './../Menu/homeMenu'
import HeaderMenu from '../Header/header'
//const { Header } = Layout;
/**
0、获取和传递组件值，用props
1、selHeaderMenu：同子组件headerjs进行通信的函数，不需要在自身组件中定义，只需要在子组件中定义
2、子组件传递过来的menu值，通过selHeader函数进行改变
3、Appjs自身作为父组件，向子组件homeMenujs传递menu值
**/
class App extends Component {
state = {
headerMenu : '',
sliderMenu : ''
}
selHeader(menu,slider){
this.setState({headerMenu: menu,sliderMenu : slider});
}
render() {
var h = document.documentElement.clientHeight || document.body.clientHeight;
var mainStyle = {
height:h-60,
overflowY:'auto'
};
return (
<div>
<Layout>
<HeaderMenu selHeadrMenu={(menu,slider)=>this.selHeader(menu,slider)}></HeaderMenu>
<div className='app-content' style={mainStyle}>
<div className='app-left-menu'>
<HomeMenu sliderMenu={this.state.headerMenu} sliderLeftMenu={this.state.sliderMenu}></HomeMenu>
</div>
<div className='app-right-menu'>
<div style={{width:'75%'}}>
<RouteConfig></RouteConfig>
</div>
{/*右侧快捷菜单*/}
<div className='app-right-left-content'>
<div className='item-title'>
最近更新
</div>
<div className='item-value'>
<Icon type="file" />xxxxxxxxxxx
</div>
<div className='item-value'>
<Icon type="file" />xxxxxxxxxxx
</div>
<div className='item-value'>
<Icon type="file" />xxxxxxxxxxx
</div>
</div>
</div>
<div style={{clear:'both'}}></div>
</div>
</Layout>
</div>
);
}
}
export default App;
- menu.js部分
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Icon } from 'antd';
import './homeMenu.css'
/**
* 0、获取和传递组件值，用props
* 1、
*/
class HomeMenu extends Component {
state = {
sliderMenu : ''
}
selSilder(silder) {
this.setState({sliderMenu: silder});
//保存选中的位置记录
localStorage.setItem("silderMenu", silder);
}
initState(){
let silder = localStorage.getItem("silderMenu");
this.setState({sliderMenu: silder ? silder : 'home'});
}
render() {
return (
<div style={{textAlign:'left',marginLeft:'70px'}}>
{this.props.sliderMenu === 'menu1' &&
<ul className='menu-ul'>
<Link to="/" className={this.state.sliderMenu === 'home' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('home')}>
<li>
<Icon type="home" className='menu-ul-icon'/>IT技术
</li>
</Link>
<Link to="/photography" className={this.state.sliderMenu === 'photography' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('photography')}>
<li>
<Icon type="home" className='menu-ul-icon'/>摄影、游记
</li>
</Link>
<Link to="/music" className={this.state.sliderMenu === 'music' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('music')}>
<li>
<Icon type="home" className='menu-ul-icon'/>音乐笔记
</li>
</Link>
</ul>}
{this.props.sliderMenu === 'menu2' &&
<ul className='menu-ul'>
<Link to="/Home2" className={this.state.sliderMenu === 'home2' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('home2')}>
<li>
<Icon type="home" className='menu-ul-icon'/>主页2
</li>
</Link>
<Link to="/About2" className={this.state.sliderMenu === 'about2' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('about2')}>
<li>
<Icon type="home" className='menu-ul-icon'/>关于我们2
</li>
</Link>
<Link to="/News2" className={this.state.sliderMenu === 'news2' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('news2')}>
<li>
<Icon type="home" className='menu-ul-icon'/>新闻页面2
</li>
</Link>
</ul>}
</div>
);
}
//DOM加载完成后执行，同上面的注释
componentDidMount() {
this.initState();
}
componentWillReceiveProps(){
this.initState();
}
}
export default HomeMenu
- header.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './header.css';
class HeaderMenu extends Component {
state = {
headActive:'menu1'
};
selMenu(menu,silder){
/**
* 获取和传递组件值，用props
* 流程为：header选中后，得到相应的值，通知父组件Appjs作出改变---->切换到Appjs中查看
* this.props.selHeadrMenu：表示向父组件Appjs的函数selHeadrMenu传递相关值
* this.setState({headActive: menu})：修改state的headActive选中值
*/
this.props.selHeadrMenu(menu,silder);
this.setState({headActive: menu});
//保存header选中的位置记录
localStorage.setItem("headerMenu",menu);
localStorage.setItem("silderMenu",silder);
}
render() {
return (
<div className='head-class'>
<div className='head-logo text-center'>
logo
</div>
<div className='head-menu-main'>
<div className='head-menu-item'>
<Link to="/" >
<span className={this.state.headActive === 'menu1' ? 'head-active head-menu-child-item' : 'head-menu-child-item'} onClick={() => this.selMenu('menu1','home')}>
菜单一
</span>
</Link>
<Link to="/home2">
<span className={this.state.headActive === 'menu2' ? 'head-active head-menu-child-item' : 'head-menu-child-item'} onClick={() => this.selMenu('menu2','home2')}>
菜单二
</span>
</Link>
</div>
<div style={{position:'absolute',right:'20px',top:'0px',color:'#a5a5a5'}}>
admin
</div>
</div>
<div style={{clear:'both'}}></div>
</div>
);
}
//DOM加载完成后执行，同上面的注释
componentDidMount() {
let menu = localStorage.getItem("headerMenu");
let silder = localStorage.getItem("silderMenu");
this.props.selHeadrMenu(menu ? menu : 'menu1',silder ? silder : 'home');
this.setState({headActive: menu ? menu : 'menu1'});
}
}
export default HeaderMenu
总结
主要代码部分为以上4个文件，其实很简单，具体github地址：
https://github.com/522011796/react-demo
