React中嵌套组件与被嵌套组件的通信过程

前言

在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>  ) }}