資訊專欄INFORMATION COLUMN
摘要：小書最后頁面會顯示內容組件可以和組件組合在一起，組件內部可以使用別的組件。當頁面結構復雜起來，有許多不同的組件嵌套組合的話，組件樹會相當的復雜和龐大。下一節中我們將介紹小書事件監聽。
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 - 事件監聽》。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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...
閱讀 2261·2021-10-09 09:41
閱讀 3409·2021-09-13 10:34
閱讀 1920·2019-08-30 12:59
閱讀 557·2019-08-29 17:27
閱讀 1063·2019-08-29 16:07
閱讀 2956·2019-08-29 13:15
閱讀 1306·2019-08-29 13:14
閱讀 1562·2019-08-26 12:18
