React中嵌套組件與被嵌套組件的通信

前言在React項目的開發中經常會遇到這樣一個場景：嵌套組件與被嵌套組件的通信。比如Tab組件啊，或者下拉框組件。場景這裡應用一個最簡單的Tab組件來呈現這個場景。 import React, { Component, PropTypes } from 'react' class Tab e ...

前言

在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來解決這個問題。