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

時間  2020-05-05
標籤 react 嵌套 組件 通訊 欄目 React 简体版
原文   原文鏈接

前言

在React項目的開發中常常會遇到這樣一個場景：嵌套組件與被嵌套組件的通訊。node

好比Tab組件啊，或者下拉框組件。react

場景

這裏應用一個最簡單的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爲使用它們的組件。ide

在上述場景中，點擊哪一個TabItem項時，就將這個TabItem項激活。函數

以上方案算是嵌套組件最經常使用的方案了。工具

需求的變動與缺陷的暴露

在上述場景下應用上述方案是沒有問題的，可是咱們一般用的Tab沒有這麼簡單，好比當點擊武漢這個TabItem時，武漢地區的美食也要展現出來。this

這種場景下就須要修改TabItem組件爲：spa

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組件爲：code

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程