前言
在React項目的開發中經常會遇到這樣一個場景：嵌套組件與被嵌套組件的通信。
比如Tab組件啊，或者下拉框組件。
場景
這里應用一個最簡單的Tab組件來呈現這個場景。
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三個組件，其中Tab為嵌套組件，TabItem為被嵌套組件，Area為使用它們的組件。
在上述場景中，點擊哪個TabItem項時，就將這個TabItem項激活。
以上方案算是嵌套組件最常用的方案了。
需求的變更與缺陷的暴露
在上述場景下應用上述方案是沒有問題的，但是我們通常用的Tab沒有這么簡單，比如當點擊武漢這個TabItem時，武漢地區的美食也要展示出來。
這種場景下就需要修改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的時候已經沒辦法用 數組+map 的形式去寫了。
因為這里有大量的jsx在這里，如果那樣去寫，代碼的可讀性將會非常糟糕。
那么用上面的寫法寫的時候，就會出現一個問題，就是onClick在不斷重復，active的判斷也在不斷重復。
嘗試掩蓋active判斷重復的問題
這個比較容易，修改代碼如下：
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不斷重復的問題
想要onClick不重復，那么就不能將其寫在TabItem上，而是應該寫在Tab上。
那么這個地方就得用到事件冒泡的機制。
將onClick寫在Tab上，然后根據捕獲的事件消息，獲取target的class是否為switchBtn，然后得到target的text。
再將這個text賦值為activeName。
並且你還得期望點擊的switchBtn的內的結構不那么復雜，最好是就只有一個文本。
如果需求還要給Tab項的切換按鈕每個都加上圖標，那么你還得看這個事件的target是不是這個圖標。那么又需要做更多的處理了。
想一想就覺得麻煩。
一般在這種情況下，腦子里唯一的想法就是，就這樣吧，這個onClick重復就重復吧，沒什么大不了的。
連我自己都懶得寫這部分代碼了。
嵌套組件與被嵌套組件的通信：React.Children與React.cloneElement
實際上要解決上面的問題，只需要一個東西就好了，那就是嵌套組件能傳遞值給被嵌套組件的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賦值給每個子組件（父組件傳值給子組件）
activeName: this.props.activeName,
// 父組件的方法掛載到props.onClick上，以便子組件內部通過props調用
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>
)
}
}
通過這種方式，我們發現在使用Tab和TabItem時會變得非常簡單。
那么接下來讓我們介紹一下解決嵌套組件通信這個問題的關鍵：React.Children.map和React.cloneElement。
React.Children
React.Children是專門用來處理this.props.children這個東西的工具。
通常props.children可以是任何變量類型：數組、對象、文本或者其他的一些類型，但是我們這里使用
React.Children.map(this.props.children,(child)=>{
// ***
})
無論this.props.children的類型是什么都不會報錯。
這里只是用了React.children的map函數，實際上它還有foreach，count以及only的玩法。
foreach就不解釋了，很容易理解是干嘛的。
count就是得到被嵌套組件的數量。
only就是返回被嵌套的組件，並且只能有一個被嵌套的組件，否則會拋異常。
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的就相當克隆一個組件，然后可以傳給它額外的props和children。
總結
對於簡單的嵌套組件用最開始的方法其實已經夠了。
但是對於復雜的嵌套組件為了更好更方便的使用，往往需要與被嵌套的組件進行通信。
而我們可以使用React.Children和React.cloneElement來解決這個問題。