資訊專欄INFORMATION COLUMN
摘要：小書最后頁面會(huì)顯示內(nèi)容組件可以和組件組合在一起，組件內(nèi)部可以使用別的組件。當(dāng)頁面結(jié)構(gòu)復(fù)雜起來，有許多不同的組件嵌套組合的話，組件樹會(huì)相當(dāng)?shù)膹?fù)雜和龐大。下一節(jié)中我們將介紹小書事件監(jiān)聽。
React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson8
轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
繼續(xù)拓展前面的例子，現(xiàn)在我們已經(jīng)有了 Header 組件了。假設(shè)我們現(xiàn)在構(gòu)建一個(gè)新的組件叫 Title，它專門負(fù)責(zé)顯示標(biāo)題。你可以在 Header 里面使用 Title組件：
class Title extends Component {
render () {
return (
React 小書
)
}
}
class Header extends Component {
render () {
return (
我們可以直接在 Header 標(biāo)簽里面直接使用 Title 標(biāo)簽。就像是一個(gè)普通的標(biāo)簽一樣。React.js 會(huì)在 React 小書
會(huì)顯示在相應(yīng)的位置上。如果現(xiàn)在我們在 Header 里面使用三個(gè)
這樣可復(fù)用性非常強(qiáng)，我們可以把組件的內(nèi)容封裝好，然后靈活在使用在任何組件內(nèi)。另外這里要注意的是，自定義的組件都必須要用大寫字母開頭，普通的 HTML 標(biāo)簽都用小寫字母開頭。
現(xiàn)在讓組件多起來。我們來構(gòu)建額外的組件來構(gòu)建頁面，假設(shè)頁面是由 Header 、Main 、Footer 幾個(gè)部分組成，由一個(gè) 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 (
最后頁面會(huì)顯示內(nèi)容：
組件可以和組件組合在一起，組件內(nèi)部可以使用別的組件。就像普通的 HTML 標(biāo)簽一樣使用就可以。這樣的組合嵌套，最后構(gòu)成一個(gè)所謂的組件樹，就正如上面的例子那樣，Index 用了 Header、Main、Footer，Header 又使用了 Title 。這樣用這樣的樹狀結(jié)構(gòu)表示它們之間的關(guān)系：
這里的結(jié)構(gòu)還是比較簡單，因?yàn)槲覀兊捻撁娼Y(jié)構(gòu)并不復(fù)雜。當(dāng)頁面結(jié)構(gòu)復(fù)雜起來，有許多不同的組件嵌套組合的話，組件樹會(huì)相當(dāng)?shù)膹?fù)雜和龐大。理解組件樹的概念對后面理解數(shù)據(jù)是如何在組件樹內(nèi)自上往下流動(dòng)過程很重要。
下一節(jié)中我們將介紹《React.js 小書 Lesson9 - 事件監(jiān)聽》。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/89666.html
摘要：一個(gè)組件類必須要實(shí)現(xiàn)一個(gè)方法，這個(gè)方法必須要返回一個(gè)元素。你也可以把它改成，它就會(huì)顯示小書。注意，直接使用在的元素上添加類名如這種方式是不合法的?，F(xiàn)在頁面上是顯示小書。下一節(jié)中我們將介紹小書組件的組合嵌套和組件樹。 React.js 小書 Lesson7 - 組件的 render 方法 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/l...
摘要：因?yàn)楣ぷ髦幸恢痹谑褂?，也一直以來想總結(jié)一下自己關(guān)于的一些知識(shí)經(jīng)驗(yàn)。于是把一些想法慢慢整理書寫下來，做成一本開源免費(fèi)專業(yè)簡單的入門級(jí)別的小書，提供給社區(qū)。本書的后續(xù)可能會(huì)做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協(xié)議進(jìn)行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...
摘要：對于上面這個(gè)評(píng)論功能，可以粗略地劃分成以下幾部分評(píng)論功能的整體用一個(gè)叫的組件包含起來。每個(gè)評(píng)論列表項(xiàng)由獨(dú)立的組件負(fù)責(zé)顯示，這個(gè)組件被所使用。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能二。 React.js 小書 Lesson14 - 實(shí)戰(zhàn)分析：評(píng)論功能（一） 本文作者：胡子大哈本文原文：http://react.huziketang.com/blog/lesson14 轉(zhuǎn)載請注明出處，保...
摘要：由于會(huì)把插入表達(dá)式里面數(shù)組中的一個(gè)個(gè)羅列下來顯示。這樣通過這個(gè)布局組件，就可以在各個(gè)地方高度復(fù)用我們的布局。嵌套的結(jié)構(gòu)在組件內(nèi)部都可以通過獲取到，這種組件編寫方式在編寫容器類型的組件當(dāng)中非常有用。下一節(jié)中我們將介紹小書和屬性。 React.js 小書 Lesson22 - props.children 和容器類組件 本文作者：胡子大哈本文原文：http://huziketang.co...
摘要：最后抽離出來了一個(gè)類，可以幫助我們更好的做組件化。一個(gè)組件有自己的顯示形態(tài)上面的結(jié)構(gòu)和內(nèi)容行為，組件的顯示形態(tài)和行為可以由數(shù)據(jù)狀態(tài)和配置參數(shù)共同決定。接下來我們開始正式進(jìn)入主題，開始正式介紹。下一節(jié)鏈接直達(dá)小書基本環(huán)境安裝 React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類 本文作者：胡子大哈本文原文：http://huziketang.com/books...
閱讀 2319·2021-10-09 09:41
閱讀 3498·2021-09-13 10:34
閱讀 1992·2019-08-30 12:59
閱讀 618·2019-08-29 17:27
閱讀 1125·2019-08-29 16:07
閱讀 3025·2019-08-29 13:15
閱讀 1378·2019-08-29 13:14
閱讀 1635·2019-08-26 12:18
