Reactスロットの使い方

// 015 'react' から React をインポートし、スロットを使用します。
'react-dom' から ReactDOM をインポートします。
// 親コンポーネントクラス ParentDom は React.Component を拡張します {
    コンストラクタ(props) {
        スーパー(小道具)
        この状態 = {
            聞いたデータ: "ヘッダーデータ",
            footData: "下部データ",
            contentData: 「コンテンツデータ」
        }
    }
    コンポーネントマウント() {
    }

    与える（） {
        戻る （
            <div>
                <h1>015スロットの使用</h1>
                <チャイルド ドメイン>
                    <div data-position="heard" >これがヘッダーです</div>
                    <div data-position="content" >これはコンテンツ丨{this.state.contentData}</div>です
                    <div data-position="foot" >これが一番下です</div>
                </ChildDom>
            </div>
        ）
    }
}
// 子コンポーネントクラス ChildDom は React.Component を拡張します {        
    コンストラクタ(props) {
        スーパー(小道具)  
    }
    与える（） {
        聞かせて、満足して、足で;
        this.props.children.forEach(item =>{
            if(item.props['data-position'] == 'heard'){
                聞いた = 項目
            }そうでない場合、item.props['data-position'] == 'content'){
                コンテンツ = アイテム
            }そうでない場合、item.props['data-position'] == 'foot'){
                足 = アイテム
            }
        })  
        戻る （
            <div> 要素
                <p>私はサブコンポーネントです</p>
               <div className="聞いた">
                   {聞いた}
               </div>
               <div クラス名="コンテンツ">
                   {コンテンツ}
               </div>
               <div className="foot">
                   {足}
               </div>
            </div>
        ）
    }
}

エクスポートデフォルト関数（）{
    ReactDOM.render() は、
        <親ドメイン />,
        ドキュメント.クエリセレクタ("#example15")
    );
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./NavBar' から NavBar をインポートします
'./NavBar2' から NavBar2 をインポートします

デフォルトクラスAppをエクスポートし、Componentを拡張します。
  与える（） {
    戻る （
      <div>
        <ナビゲーションバー>
          <span>ああ</span>
          <strong>bbb</strong>
          <a href="/#" rel="外部 nofollow" rel="外部 nofollow" >ccc</a>
        </ナビゲーションバー>

        <NavBar2 左スロット={<span>aaa</span>}
        センタースロット={<strong>bbb</strong>}
        rightslot={<a href="/#" rel="external nofollow" rel="external nofollow" >ccc</a>}/>
      </div>
    ）
  }
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。

'./style.css' をインポートします
デフォルトクラス NavBar をエクスポートして Component を拡張します {
  与える （） {
    戻る （
      <div className="ナビゲーションバー">
        <div className="nav-left">
          {this.props.children[0]}
        </div>
        <div className="nav-center">
          {this.props.children[1]}
        </div>
        <div className="nav-right">
          {this.props.children[2]}
        </div>
      </div>
    ）
  }
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。

'./style.css' をインポートします
デフォルトクラス NavBar をエクスポートして Component を拡張します {
  与える （） {
    const {leftslot, centerslot,rightslot} = this.props
    戻る （
      <div className="ナビゲーションバー">
        <div className="nav-left">
          {左スロット}
        </div>
        <div className="nav-center">
          {センタースロット}
        </div>
        <div className="nav-right">
          {右スロット}
        </div>
      </div>
    ）
  }
}