コンポーネントの再利用性を向上させるために反応します

1.プロパティの小道具との組み合わせ

1. props.children

props.children必要なカスタムコンテンツをレンダリング

関数ダイアログ（小道具）{ // 共通の構成要素は、
  戻り（
     <DIV> 
      <H1クラス名= "ダイアログタイトル"の> props.title {} </ H1の> 
      <クラス名= P "ダイアログメッセージ"> 
        {} props.message
       < / P>
       { 
        props.children // 最終組立のカスタムユーザコンテンツを追加することができ
      }
     </ div>
  ）
} 
クラスSignUpDialog React.Component {延び
  コンストラクタ（小道具）{ 
    スーパー（小道具）; 
    この .STATE = { 
      ログイン名： ' ' 
    } 
  } 
  handleChange =（E）=> {
     この .setState（{
      LOGINNAME：e.target.value 
    }）
  } 
  のrender（）{ 
    リターン（
       < ダイアログの
        タイトル = "ようこそ"  
        メッセージ = "私たちの宇宙船を訪問していただきありがとうございます！" 
      > 
        < 入力
          タイプ = "text"の 
          値 = { この.state.loginName } 
          のonChange = { この.handleChange}
         /> 
        <ボタン> 
          注册
         </ボタン> 
      </ダイアログ>     ）
  } 
}

2.成分を変数として別のコンポーネントに渡されます。

関数ダイアログ（小道具）{ // 通用组件
  リターン（
     <div> 
      { 
        props.selfDefine || <H1クラス名= "ダイアログタイトル"> {props.title} </ H1>
       }
       <Pクラス名= "ダイアログメッセージ" > 
        {props.message}
       </ P> 
    </ div>   ）
} 
クラスSignUpDialog延びReact.Component { 
  ）（レンダリング{ 
    CONST H2 = <H2>这是自定义的标题</ H2>。
    リターン（
       < ダイアログ
        タイトル =「ようこそ」 
        メッセージは =「私たちの宇宙船を訪問していただきありがとうございます！」
{H2}
       />
     ）
  } 
}