在src目录下新建Containers
文件夹和Components
文件夹,分别用来放置容器组件以及子组件。
考虑到学习成本以及项目本身就是个小体量的,所以这里的数据使用mobx管理,有兴趣的可以参考一下,MobX入门介绍,不想学习看看也能知道这是什么意思,这不是重点。
简单介绍一下,一个好的应用程序是不允许出现不一致的数据状态的,mobx解决了这个根源问题,使用它就不可能发生状态不一致的情况。实现这个的方式是让一切东西都可以被应用状态自动的驱动。
首先,要使用mobx,要先引入依赖包。
yarn add mobx
yarn add mobx-react
绑定react
截止到目前位置,项目的环境已经配置完毕了。下面开始开发导航栏:
先创建一个mobx对象,如mobx_store.js文件,引入生成的代码地图文件,然后用mobx绑定上这个变量,以便发生变化直接可以页面响应。里面有个变量是currentTag这个是表示当前选中的Menu页。displayMode暂时还没有用到。
说一下FileMapCount的代码,这里可能不太直观,给出处理后的数据结构
fileMap.json
{"css":{"css详解":true},"js":{"javaScript遍历":true}}
得出结果为
{"css":1,"js":1}这样方便显示当前的大标签和当前标签下文章的数量
从App.js中引入store,然后找到Nav组件,这个组件传入了几个变量
<Nav fileMap={store.FileMapCount} 刚才得出的数据
displayMode={store.displayMode} 展示模式,暂未开启使用
tag={store.currentTag} 当前的tag
onChangeTag={this.changeTag} 更换tag的方法
/>
然后进入到Nav.js,他引入了antd的Menu,所以使用起来也很直观,就是遍历然后显示。效果大概是这个样子的:
我这个使用了dark的theme,差不多就是这个展示效果,然后,要处理一下tag的点击事件了,点击之后在右侧显示blog的列表。
找到ArticleList组件,传入fileMap和tag,根据当前的tag显示list内容,在这里说一下mobx的实现效果,在Menu和ArticleList都传入了tag,所以无论是通过url,还是点击Menu调用了changeTag方法导致了tag发生了改变,都会同步影响到Menu以及ArticleList的内容展示。
这如果是react本身去实现,要附带上componentWillReciveProps这个方法并把属性作为props传入到子组件中,官方现在也不是很推荐使用这个方法了,所以减少了代码的冗余和复杂性。
还有一件事,找到public
文件夹下面的index.html
里面,修改一下div的样式,把高度设置为100%
<div id="root" style="height:100%"></div>
这也是个细节操作,不然高度显示会有问题。
现在去看这个组件的实现。其实也很简单无非遍历,然后根据当前的tag展示不同的list。
我在mobx中放入了一个articleData
的数组,当tag发生改变,调用mobx中定义的changeActicleData
方法,就可以改变这个变量,从而反馈到ArticleList中去。
@action.bound changeActicleData (tag) {
let articleData = [];
Object.keys(FILE_MAP[tag]).map(articleName => {
let helper = require('./articles/'+ tag + '/' + articleName);
let basicInfo = helper.getBasicInfo();
let time = new Date(basicInfo.time);
basicInfo.menTime = time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日' + ' '+time.getHours()+'时' + time.getMinutes()+'分' ;
articleData.push({
basicInfo: basicInfo,
overviewPic: helper.getOverviewPic(),
title: articleName,
tag: tag
})
})
this.articleData = articleData;
}
ArticleList的代码我就不粘贴了,很简单就是单纯的一个map读取全部的信息。
大概的实现效果就是这个样子了。截图看一下效果。