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

發(fā)布時(shí)間：2020-09-23 22:22:39 來(lái)源：腳本之家閱讀：151 作者：韓子盧欄目：web開發(fā)

前言

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

場(chǎng)景

這里應(yīng)用一個(gè)最簡(jiǎn)單的Tab組件來(lái)呈現(xiàn)這個(gè)場(chǎng)景。

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三個(gè)組件，其中Tab為嵌套組件，TabItem為被嵌套組件，Area為使用它們的組件。
在上述場(chǎng)景中，點(diǎn)擊哪個(gè)TabItem項(xiàng)時(shí)，就將這個(gè)TabItem項(xiàng)激活。

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

需求的變更與缺陷的暴露

在上述場(chǎng)景下應(yīng)用上述方案是沒有問題的，但是我們通常用的Tab沒有這么簡(jiǎn)單，比如當(dāng)點(diǎn)擊武漢這個(gè)TabItem時(shí)，武漢地區(qū)的美食也要展示出來(lái)。

這種場(chǎng)景下就需要修改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的時(shí)候已經(jīng)沒辦法用數(shù)組+map 的形式去寫了。

因?yàn)檫@里有大量的jsx在這里，如果那樣去寫，代碼的可讀性將會(huì)非常糟糕。

那么用上面的寫法寫的時(shí)候，就會(huì)出現(xiàn)一個(gè)問題，就是onClick在不斷重復(fù)，active的判斷也在不斷重復(fù)。

嘗試掩蓋active判斷重復(fù)的問題

這個(gè)比較容易，修改代碼如下：

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不斷重復(fù)的問題

想要onClick不重復(fù)，那么就不能將其寫在TabItem上，而是應(yīng)該寫在Tab上。

那么這個(gè)地方就得用到事件冒泡的機(jī)制。

將onClick寫在Tab上，然后根據(jù)捕獲的事件消息，獲取target的class是否為switchBtn，然后得到target的text。
再將這個(gè)text賦值為activeName。

并且你還得期望點(diǎn)擊的switchBtn的內(nèi)的結(jié)構(gòu)不那么復(fù)雜，最好是就只有一個(gè)文本。

如果需求還要給Tab項(xiàng)的切換按鈕每個(gè)都加上圖標(biāo)，那么你還得看這個(gè)事件的target是不是這個(gè)圖標(biāo)。那么又需要做更多的處理了。

想一想就覺得麻煩。

一般在這種情況下，腦子里唯一的想法就是，就這樣吧，這個(gè)onClick重復(fù)就重復(fù)吧，沒什么大不了的。
連我自己都懶得寫這部分代碼了。

嵌套組件與被嵌套組件的通信：React.Children與React.cloneElement

實(shí)際上要解決上面的問題，只需要一個(gè)東西就好了，那就是嵌套組件能傳遞值給被嵌套組件的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賦值給每個(gè)子組件（父組件傳值給子組件）
        activeName: this.props.activeName,
        // 父組件的方法掛載到props.onClick上，以便子組件內(nèi)部通過props調(diào)用
        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>
  )
 }
}

通過這種方式，我們發(fā)現(xiàn)在使用Tab和TabItem時(shí)會(huì)變得非常簡(jiǎn)單。

那么接下來(lái)讓我們介紹一下解決嵌套組件通信這個(gè)問題的關(guān)鍵：React.Children.map和React.cloneElement。
React.Children

React.Children是專門用來(lái)處理this.props.children這個(gè)東西的工具。

通常props.children可以是任何變量類型：數(shù)組、對(duì)象、文本或者其他的一些類型，但是我們這里使用

React.Children.map(this.props.children,(child)=>{
 // ***
})

無(wú)論this.props.children的類型是什么都不會(huì)報(bào)錯(cuò)。

這里只是用了React.children的map函數(shù)，實(shí)際上它還有foreach，count以及only的玩法。

foreach就不解釋了，很容易理解是干嘛的。
count就是得到被嵌套組件的數(shù)量。
only就是返回被嵌套的組件，并且只能有一個(gè)被嵌套的組件，否則會(huì)拋異常。

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的就相當(dāng)克隆一個(gè)組件，然后可以傳給它額外的props和children。

總結(jié)

對(duì)于簡(jiǎn)單的嵌套組件用最開始的方法其實(shí)已經(jīng)夠了。

但是對(duì)于復(fù)雜的嵌套組件為了更好更方便的使用，往往需要與被嵌套的組件進(jìn)行通信。

而我們可以使用React.Children和React.cloneElement來(lái)解決這個(gè)問題。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽