組件復合

• 復合組件給予你足夠的靈活去定義組件的外觀和行為,而且是以一種明確和安全的方式進行.
• 如果組件間有公用的非UI邏輯,將它們抽取為JS模塊導入使用而不是繼承它
• /src/components/Composition.js

// Dialog作為容器不關心內容和邏輯
function Dialog(props){return <div style={{ border: "4px solid blue" }}>{props.children}</div>
}// WelcomeDialog通過復合提供內容
function WelcomDialog() {return (<Dialog><h1>歡迎光臨</h1><p>感謝使用react</p></Dialog>)
}export default function (){return <WelcomDialog></WelcomDialog>
}

栗子

import React from 'react'
// Dialog作為容器不關心內容和邏輯
// 等同于vue中的slot
function Dialog(props) {return <div style={{ border: `4px solid ${props.color || 'blue'}` }}>{props.children}<div className="footer">{props.footer}</div></div>
}// WelcomeDialog通過復合提供內容
function WelcomeDialog(props) {return (<Dialog {...props}><h1>歡迎光臨</h1><p>感謝使用react</p></Dialog>)
}export default function() {const footer = <button>相當于 -- 具名插槽</button>return <WelcomeDialog color="red" footer={footer}></WelcomeDialog>
}