合成と継承
構成部品に他の構成部品を含める
一部の構成部品では、どのサブアイテムが導入されるかを事前に決定できない場合があります.
SidebarまたはDialogのような一般的な「カセット」機能を有する要素において特に一般的である.これらの構成要素では、特別な
children propを使用してサブエンティティをそのまま出力に転送することを推奨する.function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">Welcome</h1>
<p className="Dialog-message">Thank you for visiting our spacecraft!</p> </FancyBorder>
);
}<FancyBorder> JSXタグの内容は、FancyBorderコンポーネントのchildren propに渡されます.FancyBorderは、{props.children}を<div>にレンダリングし、最終的に伝達されたエンティティを出力する.一般的ではありませんが、構成部品には多くの穴が必要になる場合があります.この場合、
childrenではなく、独自の方法を採用することができます.function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
{props.left} </div>
<div className="SplitPane-right">
{props.right} </div>
</div>
);
}
function App() {
return (
<SplitPane
left={
<Contacts /> }
right={
<Chat /> } />
);
}Reference
この問題について(合成と継承), 我々は、より多くの情報をここで見つけました https://velog.io/@hqillz/합성-Composition-vs-상속-Inheritanceテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol