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

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

2017.01.21 14:34 5533浏览
选择城市页

网页源码:
购买实战课程后,在播放视频页面右侧可查看到章节源代码。

页面最终效果

路由

找到路由配置页面./app/router/routeMap.jsx可以看到配置城市页面的路由代码。

<Route path='/' component={App}>
    ......
    <Route path='/city' component={City}/>
    ......
</Route>

从代码可以看出,路由引用的是./app/containers/City这个页面。注意,它还有个App的父组件,跟之前讲的Home一样

City页面

既然是选择城市页面,那么至少要支持两个功能

  • 显示当前城市
  • 允许修改城市

这两个功能,都需要 Redux 的支持,因此City页面要能连接 Redux ,React 组件连接 Redux 之前已经讲解过两次,这里不再详细解释

function mapStateToProps(state) {
    return {
        userinfo: state.userinfo
    }
}

function mapDispatchToProps(dispatch) {
    return {
        userInfoActions: bindActionCreators(userInfoActionsFromOtherFile, dispatch)
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(City)
跳转到城市选择页

HomeHeader组件中,加一个链接,点击时能跳转到城市选择页面。这里用到了react-router中的<Link>组件

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

页面最上部是一个红色的 Header,显示页面标题,左侧有一个返回icon。不仅仅是这个页面,其他页面也会有这样的标题。多个页面公用的东西,我们就抽离成一个组件。

./app/components中创建Header组件,然后引用到City页面中,并传入页面标题

<Header title="选择城市"/>

Header组件的代码非常简单,显示标题,然后支持返回功能

    render() {
        return (
            <div id="common-header">
                <span className="back-icon" onClick={this.clickHandle.bind(this)}>
                    <i className="icon-chevron-left"></i>
                </span>
                <h1>{this.props.title}</h1>
            </div>
        )
    }
    clickHandle() {
        window.history.back()
    }

最后一步是样式的美化。

显示当前城市

用 React、Vue 框架来开发 webapp 时,就得要求页面被拆分成非常细粒度的组件,这里虽然只是显示当前城市,也要作为一个组件抽离出去。

创建一个CurrentCity组件,并引用到City页面,然后将当前城市传递给它来显示

<CurrentCity cityName={this.props.userinfo.cityName}/>

CurrentCity组件的代码也非常简单,只需要显示出当前城市即可。剩下的就是一些样式的美化。

    render() {
        return (
            <div className="current-city">
                <h2>{this.props.cityName}</h2>
            </div>
        )
    }
可选城市列表

创建一个CityList组件来显示可选城市的列表。其中,可选的城市就是固定的几个城市,没有从后台获取,因为我们的关键不在于显示,而在于改变。因此,教程的每一个片段都要注重重点,不要让配角占有太多戏份。

点击每个城市,都需要将这个城市设置为当前城市,而这个设置的方法,我们在City页面定义。代码结构如下:

    render() {
        return (
            <div>
                ......
                <CityList changeFn={this.changeCity.bind(this)}/>
            </div>
        )
    }
    changeCity(newCity) {
        // 将新选择的城市设置为当前城市
        // 1. 修改 redux 
        // 2. 修改 localStorage
        // 3. 跳转到首页
    }

而在CityList组件中,我们要使用刚才定义的changeCity方法,即

render() {
        return (
            <div className="city-list-container">
                <ul className="clear-fix">
                    <li>
                        <span onClick={this.clickHandle.bind(this, '北京')}>北京</span>
                    </li>
                    <li>
                        <span onClick={this.clickHandle.bind(this, '上海')}>上海</span>
                    </li>
                    ....
                </ul>
            </div>
        )
    }
    clickHandle(cityName) {
        const changeFn = this.props.changeFn
        changeFn(cityName)
    }
总结

选择城市这个页面比较简单,要注意

  • 两种页面跳转方式
  • 修改 Redux 的值
点击查看更多内容
8人点赞

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

评论

相关文章推荐

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

举报

0/150
提交
取消