React中嵌套組件與被嵌套組件的通信過(guò)程
前言
在React項(xiàng)目的開(kāi)發(fā)中經(jīng)常會(huì)遇到這樣一個(gè)場(chǎng)景：嵌套組件與被嵌套組件的通信。
比如Tab組件啊，或者下拉框組件。
場(chǎng)景
這里應(yīng)用一個(gè)最簡(jiǎn)單的Tab組件來(lái)呈現(xiàn)這個(gè)場(chǎng)景。
import React, { Component, PropTypes } from 'react'
class Tab extends Component {
static propTypes = {
children: PropTypes.node
}
render() {
return (
<ul>
{this.props.children}
</ul>
)
}
}
class TabItem extends Component {
static propTypes = {
name: PropTypes.string,
active: PropTypes.bool,
onClick: PropTypes.func
}
handleClick = () => {
this.props.onClick(this.props.name)
}
render() {
return (
<li onClick={this.handleClick} className={this.props.active ? 'active' : 'noActive'}>
{this.props.name}
</li>
)
}
}
export default class Area extends Component {
state = {
activeName: ''
}
handleClick = (name) => {
this.setState({
activeName: name
})
}
render() {
return (
<Tab>
{['武漢', '上海', '北京'].map((item) => <TabItem onClick={this.handleClick} active={this.state.activeName === item} name={item} />)}
</Tab>
)
}
}
這里有Tab，TabItem和Area三個(gè)組件，其中Tab為嵌套組件，TabItem為被嵌套組件，Area為使用它們的組件。
在上述場(chǎng)景中，點(diǎn)擊哪個(gè)TabItem項(xiàng)時(shí)，就將這個(gè)TabItem項(xiàng)激活。
以上方案算是嵌套組件最常用的方案了。
需求的變更與缺陷的暴露
在上述場(chǎng)景下應(yīng)用上述方案是沒(méi)有問(wèn)題的，但是我們通常用的Tab沒(méi)有這么簡(jiǎn)單，比如當(dāng)點(diǎn)擊武漢這個(gè)TabItem時(shí)，武漢地區(qū)的美食也要展示出來(lái)。
這種場(chǎng)景下就需要修改TabItem組件為：
class TabItem extends Component {
static propTypes = {
name: PropTypes.string,
active: PropTypes.bool,
onClick: PropTypes.func,
children: PropTypes.node
}
handleClick = () => {
this.props.onClick(this.props.name)
}
render() {
return (
<li onClick={this.handleClick} className={this.props.active ? 'active' : 'noActive'}>
<span className='switchBtn'>{this.props.name}</span>
<div className={this.props.active ? 'show' : 'hide'}>
{this.props.children}
</div>
</li>
)
}
}
然后沿用上述方案，那么就需要改變Area組件為：
export default class Area extends Component {
state = {
activeName: ''
}
handleClick = (name) => {
this.setState({
activeName: name
})
}
render() {
return (
<Tab>
<TabItem onClick={this.handleClick} active={this.state.activeName === '武漢'} name={'武漢'} >
武漢的美食，這里有一大堆jsx代碼
</TabItem>
<TabItem onClick={this.handleClick} active={this.state.activeName === '上海'} name={'上海'} >
武漢的美食，這里有一大堆jsx代碼
</TabItem>
<TabItem onClick={this.handleClick} active={this.state.activeName === '北京'} name={'北京'} >
武漢的美食，這里有一大堆jsx代碼
</TabItem>
</Tab>
)
}
}
這里的Area使用TabItem的時(shí)候已經(jīng)沒(méi)辦法用 數(shù)組+map 的形式去寫(xiě)了。
因?yàn)檫@里有大量的jsx在這里，如果那樣去寫(xiě)，代碼的可讀性將會(huì)非常糟糕。
那么用上面的寫(xiě)法寫(xiě)的時(shí)候，就會(huì)出現(xiàn)一個(gè)問(wèn)題，就是onClick在不斷重復(fù)，active的判斷也在不斷重復(fù)。
嘗試掩蓋active判斷重復(fù)的問(wèn)題
這個(gè)比較容易，修改代碼如下：
class TabItem extends Component {
static propTypes = {
name: PropTypes.string,
activeName: PropTypes.string,
onClick: PropTypes.func,
children: PropTypes.node
}
handleClick = () => {
this.props.onClick(this.props.name)
}
render() {
return (
<li onClick={this.handleClick} className={this.props.activeName === this.props.name ? 'active' : 'noActive'}>
<span className='switchBtn'>{this.props.name}</span>
<div className={this.props.active ? 'show' : 'hide'}>
{this.props.children}
</div>
</li>
)
}
}
export default class Area extends Component {
state = {
activeName: ''
}
handleClick = (name) => {
this.setState({
activeName: name
})
}
render() {
return (
<Tab>
<TabItem onClick={this.handleClick} activeName={this.state.activeName} name={'武漢'} >
武漢的美食，這里有一大堆jsx代碼
</TabItem>
<TabItem onClick={this.handleClick} activeName={this.state.activeName} name={'上海'} >
武漢的美食，這里有一大堆jsx代碼
</TabItem>
<TabItem onClick={this.handleClick} activeName={this.state.activeName} name={'北京'} >
武漢的美食，這里有一大堆jsx代碼
</TabItem>
</Tab>
)
}
}
嘗試掩蓋onClick不斷重復(fù)的問(wèn)題
想要onClick不重復(fù)，那么就不能將其寫(xiě)在TabItem上，而是應(yīng)該寫(xiě)在Tab上。
那么這個(gè)地方就得用到事件冒泡的機(jī)制。
將onClick寫(xiě)在Tab上，然后根據(jù)捕獲的事件消息，獲取target的class是否為switchBtn，然后得到target的text。
再將這個(gè)text賦值為activeName。
并且你還得期望點(diǎn)擊的switchBtn的內(nèi)的結(jié)構(gòu)不那么復(fù)雜，最好是就只有一個(gè)文本。
如果需求還要給Tab項(xiàng)的切換按鈕每個(gè)都加上圖標(biāo)，那么你還得看這個(gè)事件的target是不是這個(gè)圖標(biāo)。那么又需要做更多的處理了。
想一想就覺(jué)得麻煩。
一般在這種情況下，腦子里唯一的想法就是，就這樣吧，這個(gè)onClick重復(fù)就重復(fù)吧，沒(méi)什么大不了的。
連我自己都懶得寫(xiě)這部分代碼了。
嵌套組件與被嵌套組件的通信：React.Children與React.cloneElement
實(shí)際上要解決上面的問(wèn)題，只需要一個(gè)東西就好了，那就是嵌套組件能傳遞值給被嵌套組件的props，比如onClick。
那么先上一份代碼吧。
class TabItem extends Component {
static propTypes = {
name: PropTypes.string,
activeName: PropTypes.string,
onClick: PropTypes.func,
children: PropTypes.node
}
handleClick = () => {
this.props.onClick(this.props.name)
}
render() {
return (
<li onClick={this.handleClick} className={this.props.activeName === this.props.name ? 'active' : 'noActive'}>
<span className='switchBtn'>{this.props.name}</span>
<div className={this.props.active ? 'show' : 'hide'}>
{this.props.children}
</div>
</li>
)
}
}
class Tab extends Component {
static propTypes = {
children: PropTypes.node,
onClickItem: PropTypes.func,
activeName: PropTypes.string
}
render() {
return (
<ul>
{
React.Children.map(this.props.children,(child)=>{
if (child.type === TabItem) {
return React.cloneElement(child, {
// 把父組件的props.name賦值給每個(gè)子組件（父組件傳值給子組件）
activeName: this.props.activeName,
// 父組件的方法掛載到props.onClick上，以便子組件內(nèi)部通過(guò)props調(diào)用
onClick: this.props.onClickItem
})
} else {
return child
}
})
}
</ul>
)
}
}
export default class Area extends Component {
state = {
activeName: ''
}
handleClick = (name) => {
this.setState({
activeName: name
})
}
render() {
return (
<Tab activeName={this.state.activeName} onClick={this.handleClick} >
<TabItem name={'武漢'} >
武漢的美食，這里有一大堆jsx代碼
</TabItem>
<TabItem name={'上海'} >
武漢的美食，這里有一大堆jsx代碼
</TabItem>
<TabItem name={'北京'} >
武漢的美食，這里有一大堆jsx代碼
</TabItem>
</Tab>
)
}
}
通過(guò)這種方式，我們發(fā)現(xiàn)在使用Tab和TabItem時(shí)會(huì)變得非常簡(jiǎn)單。
那么接下來(lái)讓我們介紹一下解決嵌套組件通信這個(gè)問(wèn)題的關(guān)鍵：React.Children.map和React.cloneElement。
React.Children
React.Children是專門(mén)用來(lái)處理this.props.children這個(gè)東西的工具。
通常props.children可以是任何變量類型：數(shù)組、對(duì)象、文本或者其他的一些類型，但是我們這里使用
React.Children.map(this.props.children,(child)=>{
// ***
})
無(wú)論this.props.children的類型是什么都不會(huì)報(bào)錯(cuò)。
這里只是用了React.children的map函數(shù)，實(shí)際上它還有foreach，count以及only的玩法。
foreach就不解釋了，很容易理解是干嘛的。
count就是得到被嵌套組件的數(shù)量。
only就是返回被嵌套的組件，并且只能有一個(gè)被嵌套的組件，否則會(huì)拋異常。
React.cloneElement
先看下面這段代碼
const child= <Child value={1} />
const newChild=React.cloneElement(child,{
name:'額外的props'
},'123')
newChild的值為：
<Child value={1} name='額外的props' >
123
</Child>
可以很明顯看到，React.cloneElement的就相當(dāng)克隆一個(gè)組件，然后可以傳給它額外的props和children。
總結(jié)
對(duì)于簡(jiǎn)單的嵌套組件用最開(kāi)始的方法其實(shí)已經(jīng)夠了。
但是對(duì)于復(fù)雜的嵌套組件為了更好更方便的使用，往往需要與被嵌套的組件進(jìn)行通信。
而我們可以使用React.Children和React.cloneElement來(lái)解決這個(gè)問(wèn)題。
相關(guān)文章
![Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐](http://img.jbzj.com/images/xgimg/bcimg0.png)
Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐
本文主要介紹了Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
react實(shí)現(xiàn)一個(gè)優(yōu)雅的圖片占位模塊組件詳解
這篇文章主要給大家介紹了關(guān)于react如何實(shí)現(xiàn)一個(gè)還算優(yōu)雅的占位模塊圖片組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
React利用路由實(shí)現(xiàn)登錄界面的跳轉(zhuǎn)
這篇文章主要介紹了React利用路由實(shí)現(xiàn)登錄界面的跳轉(zhuǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
詳解react-router如何實(shí)現(xiàn)按需加載
本篇文章主要介紹了react-router如何實(shí)現(xiàn)按需加載，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
React報(bào)錯(cuò)之Object?is?possibly?null的問(wèn)題及解決方法
這篇文章主要介紹了React報(bào)錯(cuò)之Object?is?possibly?null的問(wèn)題,造成 "Object is possibly null"的錯(cuò)誤是因?yàn)閡seRef()鉤子可以傳遞一個(gè)初始值作為參數(shù)，而我們傳遞null作為初始值，本文給大家分享詳細(xì)解決方法，需要的朋友可以參考下2022-07-07
React 事件綁定的實(shí)現(xiàn)及區(qū)別
事件綁定也是其中一部分內(nèi)容,通過(guò)事件委托和事件合成,React 在內(nèi)部對(duì)事件進(jìn)行優(yōu)化和處理,減少了事件處理函數(shù)的調(diào)用次數(shù),從而提升了性能,本文主要介紹了React事件綁定的實(shí)現(xiàn)及區(qū)別,感興趣的可以了解一下2024-03-03
在React中寫(xiě)一個(gè)Animation組件為組件進(jìn)入和離開(kāi)加上動(dòng)畫(huà)/過(guò)度效果
這篇文章主要介紹了在React中寫(xiě)一個(gè)Animation組件為組件進(jìn)入和離開(kāi)加上動(dòng)畫(huà)/過(guò)度效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
這篇文章主要給帶大家搞清楚react hooks的類型聲明，如果有同學(xué)還不清楚react hooks的類型聲明，來(lái)看本文就對(duì)了，文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
React 進(jìn)入頁(yè)面后自動(dòng) focus 到某個(gè)輸入框的解決方案
React.js 當(dāng)中提供了 ref 屬性來(lái)幫助我們獲取已經(jīng)掛載的元素的 DOM 節(jié)點(diǎn),你可以給某個(gè) JSX 元素加上 ref屬性,這篇文章主要介紹了React 進(jìn)入頁(yè)面以后自動(dòng) focus 到某個(gè)輸入框,需要的朋友可以參考下2024-02-02
Yarn安裝項(xiàng)目依賴報(bào)error?An?unexpected?error?occurred:?“XXXXX：E
這篇文章主要為大家介紹了Yarn安裝項(xiàng)目依賴報(bào)error?An?unexpected?error?occurred:?“XXXXX：ESOCKETTIMEOUT”問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03