从零开始搭建一个基于React框架的博客发布系统 （四）菜单栏和文章列表实现

在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读取全部的信息。
大概的实现效果就是这个样子了。截图看一下效果。

欢迎收看下一篇：从零开始搭建一个基于React框架的博客发布系统 （五）展示博客内容