栏目分类:
子分类:
返回
终身学习网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
终身学习网 > IT > 软件开发 > Web开发 > React.JS

实战教程(8)开发选择城市页

React.JS 更新时间:发布时间: 百科书网 趣学号

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


选择城市页面的开发

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

链接到“选择城市”页面

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

import { Link } from 'react-router'


    {this.props.cityName}
     
    
通用的 header 组件

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

关于 GPS 定位城市

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

页面开发过程

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

选择城市之后返回首页

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

转载请注明:文章转载自 www.051e.com
本文地址:http://www.051e.com/it/1042796.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 ©2023-2025 051e.com

ICP备案号:京ICP备12030808号