React基本(入れ子のコンポーネント)

• 概要
• 解説

---

#概要

HTMLテンプレートのように、外枠となる部分を共通コンポーネントとして用意したい場合は下記のような記述で書けます。
https://qiita.com/tomi_shinwatec/items/cdd319d8fce8bdb829d0

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// テンプレートとなるコンポーネント
class TemplateComponent extends React.Component {
  render() {
    return (
      <main>
        <header>
          <h2>{this.props.title}</h2>
        </header>
        <div>
          {this.props.children}
        </div>
        <footer>
          <p>copyright company</p>
        </footer>
      </main>
    )
  }
}

// コンテンツとなるコンポーネント
class ChildComponent extends React.Component {
  render() {
    return (
      <p>コンテンツテキストです。</p>
    )
  }
}

// 基本レイアウトコンポーネント
class MainComponent extends React.Component {
  render() {
    return (
      <section>
        <h1>Main Title</h1>
        <TemplateComponent title={'コンテンツタイトル'}>
          <ChildComponent />
        </TemplateComponent>
      </section>
    )
  }
}

export default MainComponent;

#解説
基本レイアウト>テンプレート>コンテンツというイメージ

###テンプレート
propsで変更できるようにする
基本外側だけのコンポーネント
props.titleはあとあと入れる用、props.childenはコンテンツ用のコンポーネントを入れるためのもの

class TemplateComponent extends React.Component {
  render() {
    return (
      <main>
        <header>
          <h2>{this.props.title}</h2>
        </header>
        <div>
          {this.props.children}
        </div>
        <footer>
          <p>copyright company</p>
        </footer>
      </main>
    )
  }
}

###コンテンツ
props.childrenに入れるためのコンポーネント

class ChildComponent extends React.Component {
  render() {
    return (
      <p>コンテンツテキストです。</p>
    )
  }
}

###基本レイアウト
大枠となるためのコンポーネント
テンプレートコンポーネントはタグとして<TemplateComponent></TemplateComponent>のように表現できる
childComponentはそのままコンポーネントとして入れる

class MainComponent extends React.Component {
  render() {
    return (
      <section>
        <h1>Main Title</h1>
        <TemplateComponent title={'練習やで'}>
          <ChildComponent />
        </TemplateComponent>
      </section>
    )
  }
}