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

更新時間：2020年04月29日 11:00:31 作者：nero

這篇文章主要介紹了React組件設計模式之組合組件,結合實例形式分析了React組件設計模式中組合組件相關概念、原理、應用場景與操作注意事項,需要的朋友可以參考下

實現

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

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：