模拟app笔记

声明：

这些代码是我学习的一些笔记，主要记录一些思路和代码，如果看不懂的，可以绕道其行。如果能帮到你，那再好不过了。

点击一下（

主页面

）左上角的北京



如何跳转到下面这个页面（

选择城市页面

）



这个就用到路由中的Link了。

先看一下我的路由

//routerMap.js
import React,{ Component } from 'react';
import {
BrowserRouter as Router,
Route,
NavLink
} from 'react-router-dom';
//import Main from "../containers/index";
import Home from "../containers/Home/home";
import Find from "../containers/Find/find";
import Mark from "../containers/Mark/mark";
import Owner from "../containers/Owner/owner";
import { hashHistory } from 'react-router';
export default class RouterMap extends Component{
render(){
return(
<Router history={hashHistory}>
<div className="container">
<div className="content">
<Route exact path="/" component={Home} />
<Route path="/find" component={Find} />
<Route path="/mark" component={Mark} />
<Route path="/owner" component={Owner} />
</div>
<hr />
<ul className="footer_nav">
<li className="nav_item center"><NavLink className="center link_item" activeClassName="selected" exact to="/">首页</NavLink></li>
<li className="nav_item center"><NavLink className="center link_item" activeClassName="selected" to="/find">发现</NavLink></li>
<li className="nav_item center"><NavLink className="center link_item" activeClassName="selected" to="/mark">足迹</NavLink></li>
<li className="nav_item center"><NavLink className="center link_item" activeClassName="selected" to="/owner">我的</NavLink></li>
</ul>
</div>
</Router>
)
}
}

核心代码：

<Router history={hashHistory}>
<div className="container">
<div className="content">
<Route exact path="/" component={Home} />
<Route path="/find" component={Find} />
<Route path="/mark" component={Mark} />
<Route path="/owner" component={Owner} />
</div>
<hr />
<ul className="footer_nav">
<li className="nav_item center"><NavLink className="center link_item" activeClassName="selected" exact to="/">首页</NavLink></li>
<li className="nav_item center"><NavLink className="center link_item" activeClassName="selected" to="/find">发现</NavLink></li>
<li className="nav_item center"><NavLink className="center link_item" activeClassName="selected" to="/mark">足迹</NavLink></li>
<li className="nav_item center"><NavLink className="center link_item" activeClassName="selected" to="/owner">我的</NavLink></li>
</ul>
</div>
</Router>

点击主页面中的

北京

如何跳转到城市页面呢？

<Link to="/find">
<span>{this.props.cityName}</span>
 
<i className="icon-angle-down"></i>
</Link>

到

城市页面

我们要选择这里所列举的部分城市，我们随便点击一个城市它是如何回到

主页面

，并且修改

主页面

中的城市呢？

class Find extends Component{
constructor(props){
super(props);
}
//次函数主要是用来改变城市数据的
changeCity(newCity){
//将新选择的城市设置为当前城市
if( newCity == null){
return;
}
//1.修改redux
const userInfo = this.props.userInfo;
userInfo.cityName  = newCity;
this.props.userInfoActions.update(userInfo)
//2.修改localStorae
LocalStore.setItem(CITYNAME,newCity);
//3.跳转到首页
const history = createHistory()
history.go(-1);
//history.goBack();
}
render(){
return(
<div>
<Header title="选择城市" />
<CurrentCity cityName={this.props.userInfo.cityName}/>
<div className="city_list">
<h2>城市列表</h2>
<ul className="city_item clear_fix">
{/*这里一般不写注释，写的话就用这种方式注释*/}
{/*changeCity函数的作用就是：当点击选择城市页面中的数据时，我们需要城市数据进行处理，比如城市的改变*/}
{/*一般在这里需要拆分更细的组件，我为了方便，更容易懂。下面有组件化的方法*/}
<li className="item left_float center" onClick={this.changeCity.bind(this,'北京')}>北京</li>
<li className="item left_float center" onClick={this.changeCity.bind(this,'上海')}>上海</li>

</ul>
</div>
</div>
)
}
}
//--------------------------react redux 绑定---------------------------------
function mapStateToProps(state){
return{
userInfo: state.userInfo
}
}
function mapDispatchToProps(dispatch){
return{
userInfoActions: bindActionCreators(userInfoActionFromOtherFile,dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Find)

把上面提到的组件细分如下，这样是不是一目了然

import React,{Component} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as userInfoActionFromOtherFile from '../../actions/userInfo';
import Header from '../../components/Header/header';
import CurrentCity from '../../components/CurrentCity/currentcity';
import CityList from '../../components/CityList/citylist';
import LocalStore from "../../util/LocalStore";
import {CITYNAME} from "../../config/localStoreKey";
import { hashHistory } from 'react-router';
import createHistory from 'history/createBrowserHistory'
changeCity(newCity){
//将新选择的城市设置为当前城市
if( newCity == null){
return;
}
//1.修改redux
const userInfo = this.props.userInfo;
userInfo.cityName  = newCity;
this.props.userInfoActions.update(userInfo)
//2.修改localStorae
LocalStore.setItem(CITYNAME,newCity);
//3.跳转到首页
const history = createHistory()
history.go(-1);
//history.goBack();
}
return(
<div>
<Header title="选择城市" />
<CurrentCity cityName={this.props.userInfo.cityName}/>
<CityList changeFn={this.changeCity.bind(this)}/>
</div>
)

上面的

CityList

是一个组件，changeFn是一个属性，传递给子组件（CityList），这里传的其实是一个函数。

我们来看CityList组件

//citylist.js
import './citylist.less';
import React,{Component} from 'react';
export default class CityList extends Component{
constructor(props){
super(props);
}
render(){
return(
<div className="city_list">
<h2>城市列表</h2>
<ul className="city_item clear_fix">
<li className="item left_float center" onClick={this.clickHandle.bind(this,'北京')}>北京</li>
<li className="item left_float center" onClick={this.clickHandle.bind(this,'上海')}>上海</li>
<li className="item left_float center" onClick={this.clickHandle.bind(this,'杭州')}>杭州</li>
<li className="item left_float center" onClick={this.clickHandle.bind(this,'西安')}>西安</li>
<li className="item left_float center" onClick={this.clickHandle.bind(this,'武汉')}>武汉</li>
<li className="item left_float center" onClick={this.clickHandle.bind(this,'南昌')}>南昌</li>
<li className="item left_float center" onClick={this.clickHandle.bind(this,'苏州')}>苏州</li>
<li className="item left_float center" onClick={this.clickHandle.bind(this,'厦门')}>厦门</li>
<li className="item left_float center" onClick={this.clickHandle.bind(this,'海南')}>海南</li>
</ul>
</div>
)
}
//当我们点击城市页面中的列表城市时，调用这个函数。在这个函数中，通过this.props.changeFn获取父组件传递过来的属性，也就是一个函数。然后我们调用这个函数，就会导致城市数据改变。
clickHandle(newCity){
//console.log(newCity);
var changeFn = this.props.changeFn;
//console.log('---',changeFn);
changeFn(newCity);
}
}

这样就会达到我们修改数据的目的，这里面的逻辑稍微有点绕。

还有一个小知识点，城市页面的回退，这个用到了

window.history.back()
//虽然只有一行代码，但确实很有用。

组件代码如下：

export default class Header extends Component{
constructor(props){
super(props);
}
clickHandle(){
//回退历史
window.history.back()
}
render(){
return(
<div className="city_header">
<span className="city_back center" onClick={this.clickHandle.bind(this)}>
<i className="icon-chevron-left icon_color"></i>
</span>
<div className="city_box center">
<h1 className="city_title">{this.props.title}</h1>
</div>
</div>
)
}
}