React元件設計模式之組合元件應用例項分析

阿新 • • 發佈：2020-04-30

本文例項講述了React元件設計模式之組合元件應用。分享給大家供大家參考，具體如下：

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

場景：希望減少上下級元件之間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來實現。希望用法如下面一樣簡潔。

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

元件之間通過隱祕的方式進行通訊，但這裡的隱祕實際上是對props的操作在一個地方進行管理。

實現

明白了要實現的互動，和程式碼層面要實現的效果，就可以開始動手了。

TabItem元件有兩個關鍵的props: active（表明當前是否應高亮），onTabClick（自己被點選時呼叫的回撥函式），

TabItem由於是每個Tab頁面的容器，它只負責把props.children渲染出來，所以用函式式元件即可。

export const TabItem = props => {
 const { active,onTabClick,children } = props
 const style = {
  color: active ? 'red' : 'green',cursor: 'pointer'
 }
 return <>
  <h1 style={style} onClick={onTabClick}>
   {children}
  </h1>
 </>
}

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

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

使用元件時要避免傳遞props的缺點，那麼在哪裡傳遞呢？自然是是Tabs元件。但上面並沒有傳入props啊。

Tabs 雖然可以訪問到props裡邊的children，但是到手的children已經是現成的如果直接改它的話，會出問題。

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

下面來看Tabs的實現：

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：