摘要：小书最后页面会显示内容组件可以和组件组合在一起，组件内部可以使用别的组件。当页面结构复杂起来，有许多不同的组件嵌套组合的话，组件树会相当的复杂和庞大。下一节中我们将介绍小书事件监听。
React.js 小书 Lesson8 - 组件的组合、嵌套和组件树
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson8
转载请注明出处，保留原文链接以及作者信息
在线阅读：http://huziketang.com/books/react
继续拓展前面的例子，现在我们已经有了 Header 组件了。假设我们现在构建一个新的组件叫 Title，它专门负责显示标题。你可以在 Header 里面使用 Title组件：
class Title extends Component {
render () {
return (
React 小书
)
}
}
class Header extends Component {
render () {
return (
我们可以直接在 Header 标签里面直接使用 Title 标签。就像是一个普通的标签一样。React.js 会在 React 小书
会显示在相应的位置上。如果现在我们在 Header 里面使用三个
这样可复用性非常强，我们可以把组件的内容封装好，然后灵活在使用在任何组件内。另外这里要注意的是，自定义的组件都必须要用大写字母开头，普通的 HTML 标签都用小写字母开头。
现在让组件多起来。我们来构建额外的组件来构建页面，假设页面是由 Header 、Main 、Footer 几个部分组成，由一个 Index 把它们组合起来。
import React, { Component } from "react";
import ReactDOM from "react-dom";
class Title extends Component {
render () {
return (
React 小书
)
}
}
class Header extends Component {
render () {
return (
This is Header
)
}
}
class Main extends Component {
render () {
return (
This is main content
)
}
}
class Footer extends Component {
render () {
return (
This is footer
)
}
}
class Index extends Component {
render () {
return (
最后页面会显示内容：
组件可以和组件组合在一起，组件内部可以使用别的组件。就像普通的 HTML 标签一样使用就可以。这样的组合嵌套，最后构成一个所谓的组件树，就正如上面的例子那样，Index 用了 Header、Main、Footer，Header 又使用了 Title 。这样用这样的树状结构表示它们之间的关系：
这里的结构还是比较简单，因为我们的页面结构并不复杂。当页面结构复杂起来，有许多不同的组件嵌套组合的话，组件树会相当的复杂和庞大。理解组件树的概念对后面理解数据是如何在组件树内自上往下流动过程很重要。
下一节中我们将介绍《React.js 小书 Lesson9 - 事件监听》。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89666.html
摘要：一个组件类必须要实现一个方法，这个方法必须要返回一个元素。你也可以把它改成，它就会显示小书。注意，直接使用在的元素上添加类名如这种方式是不合法的。现在页面上是显示小书。下一节中我们将介绍小书组件的组合嵌套和组件树。 React.js 小书 Lesson7 - 组件的 render 方法 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/l...
摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书 本文作者：胡子大哈本文原文：React.js 小书 转载请注明出处，保留原文链接以及作者信息 在线阅读：http://huzi...
摘要：对于上面这个评论功能，可以粗略地划分成以下几部分评论功能的整体用一个叫的组件包含起来。每个评论列表项由独立的组件负责显示，这个组件被所使用。下一节中我们将介绍小书实战分析评论功能二。 React.js 小书 Lesson14 - 实战分析：评论功能（一） 本文作者：胡子大哈本文原文：http://react.huziketang.com/blog/lesson14 转载请注明出处，保...
摘要：由于会把插入表达式里面数组中的一个个罗列下来显示。这样通过这个布局组件，就可以在各个地方高度复用我们的布局。嵌套的结构在组件内部都可以通过获取到，这种组件编写方式在编写容器类型的组件当中非常有用。下一节中我们将介绍小书和属性。 React.js 小书 Lesson22 - props.children 和容器类组件 本文作者：胡子大哈本文原文：http://huziketang.co...
摘要：最后抽离出来了一个类，可以帮助我们更好的做组件化。一个组件有自己的显示形态上面的结构和内容行为，组件的显示形态和行为可以由数据状态和配置参数共同决定。接下来我们开始正式进入主题，开始正式介绍。下一节链接直达小书基本环境安装 React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类 本文作者：胡子大哈本文原文：http://huziketang.com/books...
阅读 2242·2021-10-09 09:41
阅读 3341·2021-09-13 10:34
阅读 1896·2019-08-30 12:59
阅读 535·2019-08-29 17:27
阅读 1034·2019-08-29 16:07
阅读 2937·2019-08-29 13:15
阅读 1286·2019-08-29 13:14
阅读 1519·2019-08-26 12:18
