react入门笔记四 (组件嵌套)

经过前面的那些学习,我们现在已经了解了组件化的思想,现在让我们来开始组件化的开发吧

例如我们现在实现这样一个页面

1.有一个p标签,表示跳转到的网站名

2.有一个a标签可以跳转

3.用一个div将上面的两个组件容纳进去

这个很简单实现,一个父div,里面装一个p,一个a标签就完事了,

但是如果我们的页面中有很多这样的div,我们还需要写这么多代码嘛,

不,使用组件化的思想,我们可以将div包装成一个组件,到时候一个自定义标签就完事了,好了话不多说,上代码

1.我们先定义一个组件里面放着要跳转的网站名

2.我们再定义一个组件里面放跳转的a标签

3.这时候两个子组件定义完后,该定义一个父组件将上面的两个子组件装着了

注意倒数第4行与倒数第3行的代码,在组件我们定义好以后,就可以直接像使用h5标签一样去使用我们自定义的组件了,

但是要注意,标签名要和我们定义的组件名完全一样

4.这时候组件已经都定义与组装好了,是时候将他们渲染了

5.运行效果