前言

在React項目的開發(fā)中經(jīng)常會遇到這樣一個場景：嵌套組件與被嵌套組件的通信。
比如Tab組件啊，或者下拉框組件。

場景

這里應用一個最簡單的Tab組件來呈現(xiàn)這個場景。

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時，武漢地區(qū)的美食也要展示出來。

這種場景下就需要修改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>  ) }}