模拟app笔记

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

---

点击一下（主页面）左上角的北京

如何跳转到下面这个页面（选择城市页面）

这个就用到路由中的Link了。
先看一下我的路由

//routerMap.jsimport 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>    &nbsp;    <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.jsimport './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>        )    }}