这一节,我们将创建APP顶部通用的标题栏。这个东西项目中也很常用的,什么?你想不到什么是顶部通用标题栏,我给你找几个图片:
就是这个东西。react所有的我们所看到的每一块东西,我们都应该以模块的思路来做。
1、css内容以后我们将不再给大家截图怎么写,因为都学到react了,我就觉得你css怎么也使用了至少有一两年了吧,哪怕是半年,写个background,color ,font-size应该也没问题了吧。所以,你后续就在我们上一节的demo.css去写,这里不再多说了;
2、html内容仍然不动,甚至后续index.html几乎也不会有太多的改动,因为我们以后将更多的使用import来在js文件中引入js以及css,慢慢的你就理解了React的模块思路了;
3、来到上一节的inde.js这个入口js文件,我已经把代码写好了,如图:
采用react工厂方法,创建一个AppTop组件,注意,首字母要大写而且必须大写,然后还是上一节的ReactDOM的render渲染方法,这次我们把刚才创建的AppTop组件引入过来。这样打开浏览器,看一眼我们的小效果:
其实创建组件还有其他的写法,比如:
再或者这么写:
写法不同,但异曲同工,就看你怎么写着更顺手,就像拍黄瓜一样,我们可以给黄瓜套个塑料袋,用板砖拍,也可以直接用菜刀拍,也可以用拳头砸,也可以擦丝吃,更可以稍微切几刀蘸酱吃,结果都是把黄瓜吃掉,哈哈。
4、但这个顶部是多个页面都需要用的,除了首页外,比如登录页,比如列表页,比如详情页,再比如个人中心页,再个人中心的子页面,而且我们有过项目经验的都知道,这个公用顶部样式相同,显示文字却不相同。所以,我们还需要把这个顶部模块单独出来,添加传值显示文字
5、在src文件夹下的js文件夹下,创建top.js,这个就做为我们公共顶部的模块js文件,如图:
首先这个js模块引入了刚才的demo.css,然后创建AppTop没什么可说的了,多照着写几遍,然后的export是es6的使用,是要把我们创建的AppTop这个小模块给返回出去,供外面的模块引入使用。意思就是隔壁二大娘来家里借菜刀,然后她就import,你要是想借就提供一个export,说给你。没问题吧
6、然后是index.js这个入口js文件,怎么来使用我们单独创建的这个AppTop模块呢,如图:
在这里,我们通过import引入刚才的AppTop模块,其实跟原来的<script src="top.js">差不多,但React就是要这么写,就是为了凸显自己很牛掰,怎么样,是不是很狗屎,这突然让我想到一个郭德纲的经典段子:俩人出去旅游迷路了,迷茫之中听到的坏消息是这个地方啥也没有,只能靠吃牛粪过日子,好消息却是牛粪有的是。哎,你说为什么就不能吃牛肉呢?我们继续,然后引入了AppTop,继续render渲染,到id是root的div上。看一眼浏览器,这样就是一个公用的组件了。
7、但每个页面要显示的内容不同啊,何解?我们继续。我们将首页继续改造一下,如图:
我们又新创建了一个组件SiteIndex,这里面装上之前的AppTop,然后来render渲染SiteIndex,因为首页每个页面不单单只是会又顶部,还会有其他内容,后续首页我们就可以把其他组件继续装入SiteIndex中了。
8、再看看传入的 word="首页",这个就相当于我们之前给方法传值,这里传入“首页”,然后top.js中,
采用this.props.word就可以拿到传值数据了,这样达到了就像以前我们传值显示一样的效果。
这一节稍微有点长,不过没关系,我尽量多截图,多打字,希望小伙伴们可以更轻松的去理解,实在是不理解的多敲几遍,多看几遍。下一节,我们将做一个首页banner图轮播的组件,而且几乎每个APP应用首页都会有banner图轮播,喜欢的小伙伴请关注下一节:狗屎一样的React(第四节,首页banner图轮播)