React中組合組件的使用方法

這篇文章主要講解了React中組合組件的使用方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

創(chuàng)新互聯(lián)是一家專業(yè)提供北川羌族企業(yè)網(wǎng)站建設,專注與成都做網(wǎng)站、成都網(wǎng)站建設、成都h5網(wǎng)站建設、小程序制作等業(yè)務。10年已為北川羌族眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡公司優(yōu)惠進行中。

這種模式本質上解決的是組件之間傳值的問題。但是它對于傳值以及一些內(nèi)部操控的邏輯封裝得更嚴密。

場景：希望減少上下級組件之間props的傳遞，簡單來說就是不用傳做顯式地傳值，來達到組件之間相互通信的目的

舉例來說，某些界面中應該有Tabs這樣的組件，由Tab和TabItem組成，點擊每個TabItem，該TabItem會高亮，

那么Tab和TabItem自然要進行溝通。很自然的寫法是像下面這樣

<TabItem active={true} onClick={this.onClick}>One</TabItem>
<TabItem active={false} onClick={this.onClick}>Two</TabItem>
<TabItem active={false} onClick={this.onClick}>Three</TabItem>

這樣的缺點很明顯：

每次使用 TabItem 都要傳遞一堆 props
每增加一個新的 TabItem，都要增加對應的 props
如果要增加 TabItem，就要去修改 Tabs 的 JSX 代碼

但是，組件之間的交互我們又不希望通過props或者context來實現(xiàn)。希望用法如下面一樣簡潔。

  <Tabs>
   <TabItem>第一</TabItem>
   <TabItem>第二</TabItem>
   <TabItem>第三</TabItem>
  </Tabs>

組件之間通過隱秘的方式進行通信，但這里的隱秘實際上是對props的操作在一個地方進行管理。

實現(xiàn)

明白了要實現(xiàn)的交互，和代碼層面要實現(xiàn)的效果，就可以開始動手了。

TabItem組件有兩個關鍵的props: active（表明當前是否應高亮），onTabClick（自己被點擊時調(diào)用的回調(diào)函數(shù)），

TabItem由于是每個Tab頁面的容器，它只負責把props.children渲染出來，所以用函數(shù)式組件即可。

export const TabItem = props => {
 const { active, onTabClick, children } = props
 const style = {
  color: active &#63; 'red' : 'green',
  cursor: 'pointer'
 }
 return <>
  <h2 style={style} onClick={onTabClick}>
   {children}
  </h2>
 </>
}

我們再來回顧一下想到達到的效果：

  <Tabs>
   <TabItem>第一</TabItem>
   <TabItem>第二</TabItem>
   <TabItem>第三</TabItem>
  </Tabs>

使用組件時要避免傳遞props的缺點，那么在哪里傳遞呢？自然是是Tabs組件。但上面并沒有傳入props啊。

Tabs 雖然可以訪問到props里邊的children，但是到手的children已經(jīng)是現(xiàn)成的如果直接改它的話，會出問題。

不可以直接改children的話，我們就把children復制一份，然后改這個復制過來的children，再渲染出去，就ok啦！

下面來看Tabs的實現(xiàn)：

class Tabs extends React.Component {
 state={
  activeIndex: 0
 }
 render() {
  const { activeIndex } = this.state
  const newChildren = React.Children.map(this.props.children, (child, index) => {
   if (child.type) {
     // 復制并修改children
    return React.cloneElement(child, {
     active: activeIndex === index,
     onTabClick: () => this.setState({activeIndex: index})
    })
   } else {
    return child
   }
  })
  return <div className="tabs">
   {newChildren}
  </div>
 }
}

這里需要用到React不常用的api：

React.Children.map
React.cloneElement

使用React.Children.map來對props.children進行遍歷。

而React.cloneElement可以復制某個元素，第一個參數(shù)是被復制的元素，第二個參數(shù)我們可以把想傳入的props加進去，也就是這個時機，

我們將active和onTabClick傳入。實現(xiàn)最終效果。

看完上述內(nèi)容，是不是對React中組合組件的使用方法有進一步的了解，如果還想學習更多內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前標題：React中組合組件的使用方法
網(wǎng)站地址：http://muchs.cn/article40/pihsho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、網(wǎng)站設計公司、外貿(mào)網(wǎng)站建設、網(wǎng)站維護、動態(tài)網(wǎng)站、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容