前言
- 本人也是新手，刚开始研究学习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(
, 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 (
this.selHeader(menu,slider)}>
);
}
}
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 (
{this.props.sliderMenu === 'menu1' &&
this.selSilder('home')}>
-
this.selSilder('photography')}>
-
this.selSilder('music')}>
-
}
{this.props.sliderMenu === 'menu2' &&
this.selSilder('home2')}>
-
this.selSilder('about2')}>
-
this.selSilder('news2')}>
-
}
);
}
//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 (
logo
this.selMenu('menu1','home')}>
菜单一
this.selMenu('menu2','home2')}>
菜单二
admin
);
}
//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