溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了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>這樣的缺點很明顯：
但是，組件之間的交互我們又不希望通過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 <>
<h2 style={style} onClick={onTabClick}>
{children}
</h2>
</>
}我們再來回顧一下想到達到的效果：
<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：
使用React.Children.map來對props.children進行遍歷。
而React.cloneElement可以復制某個元素，第一個參數是被復制的元素，第二個參數我們可以把想傳入的props加進去，也就是這個時機，
我們將active和onTabClick傳入。實現最終效果。
看完上述內容，是不是對React中組合組件的使用方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
