【React.js模仿大众点评webapp】实战教程（8）开发选择城市页【作废】

源码地址：https://github.com/wangfupeng1988/react-simple-o2o-demo/tree/stage2-city-page

---

选择城市页面的开发

介绍选择城市页面的开发过程。

链接到“选择城市”页面

通过react-router来做页面之间的路由跳转，代码如下。这个<Link>最终会被 React 处理成<a>标签。注意，这里的路由跳转就是改变 location 的 hash，根据 hash 变化来重新渲染页面。这也是 SPA 程序的特点。

import { Link } from 'react-router'

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

通用的 header 组件

选择城市页面、以及其他好多页面，上面都有一个 header，功能有两个：第一，返回上一个页面；第二，显示该页面标题。那么我们肯定会把它封装成一个组件，标题作为属性传递进去，发挥 React 的优势。具体可看源码。

关于 GPS 定位城市

讲 Home 页面开发的时候，如果 cookie 中没有数据，则默认显示为“北京市”。其实这里可以使用 GPS 定位城市，并且存储到 cookie 当中。但是本教程核心人物是介绍 React，和 React 关系不大的技术能省略即省略，不至于使教程过于冗长。

页面开发过程

根据源代码讲解。注意存储选择城市的过程

选择城市之后返回首页

重新选择了城市之后，返回到首页中，数据应该是不同的。这应该是后端处理，我们就不再做重复的工作，提供一份数据做例子即可。通过 log 可以看到，后端已经接收到数据了。