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的关联和跳转逻辑。

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

谢谢