Slog94_使用React框架进行前端开发6

ArthurSlog

SLog-94

Year·1

Guangzhou·China

October 10th 2018

个人网站:http://www.arthurslog.com

CSDN:https://blog.csdn.net/u010997452/article/list/1

GitHub:https://github.com/BlessedChild/ArthurSlog

NPM:https://www.npmjs.com/~arthurslog

掘金:https://juejin.im/user/59f2a424f265da432f305c66/posts

简书:https://www.jianshu.com/u/b9ebe10f0534

segmentfault:https://segmentfault.com/u/arthurslog/articles

夫轻诺必寡信 多易必多难 是以圣人犹难之 故终无难矣

开发环境MacOS(Mojave 10.14 (18A391))

信息源

Less

Webpack

jakoblind

开始编码

本次更新的内容:

其中,再React框架中,父组件通过向子组件传递回调函数,使得子组件可以修改父组件中的值

在父组件件中,为四个主界面设定了paageId,分别是0、1、2、3,一起放入一个index对象中

同时把父组件的state中的pageId作为index对象的索引

然后在四个bottomTabBar上绑定点击事件

点击的同时,调用父组件里的函数,并把绑定在TabBar上的pageId传递过去

父组件调用setState()方法,把pageId赋值给父组件state中的pageId

因此,父组件中 index对象的索引发生改变

页面重新渲染

这样就实现了四个主界面跳转的逻辑

以下是相关的代码:

./App.js

./pages/storeIndex/bottom/Bottom.jsx

在开发的过程中 常会碰到一些不太理想的情况

所以需要以结果为导向 先把基础功能实现出来

工程文件已经上传至Github:https://github.com/BlessedChild/ArthurSlogStore_1

距离一个基础的商城还缺点东西 下次接着补充

至此,完成了四个主界面的文件结构的调整 以及底部TabBar的关联和跳转逻辑。

如果你喜欢我的文章 欢迎点赞 留言

谢谢

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181010G0CRKK00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券