为了账号安全,请及时绑定邮箱和手机立即绑定

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

2016.12.04 20:03 3199浏览

源码地址: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 可以看到,后端已经接收到数据了。

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消