【Next.js入門⑤】propsで他のCompoentに値を受け渡す(レイアウト作成)

f:id:nekorokkekun:20190909140536p:plain:w1000
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。

筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。

propsの基本的な使い方

親Componentから子Componentに値を渡したいときにPropsはとても便利です。
実際にPropsを使ってみましょう。

pages/index.js

import React from 'react';
import Header from '../components/shared/Header';

class Index extends React.Component{
    render() {
        return (
            <div>
                <p>Hello Next.js</p>
                <Header title="I'm Header Component!" /> //追記
            </div>
        )
    }
}

export default Index;


components/shared/Header.js

import React from 'react';
import Link from 'next/link';

class Header extends React.Component {
    render() {
        const title = this.props.title; // Propsでindex.jsからの値を受け取る
        return (
            <React.Fragment>
                <p>{ title }</p> // 追記
    // 省略
export default Header;

これで以下のような出力となりました。
f:id:nekorokkekun:20190909132010p:plain

props.childrenを使ってみる

以下の2つのコードは同じ意味を表します。

<Header title="I'm Header Component!" />
                <Header title="I'm Header Component!">
                    
                </Header>


そして、2つ目のコードの場合、タグ間に要素を入れるとprops.childrenとして値を受け渡すことが可能です。

早速やってみましょう。

class Header extends React.Component {
    render() {
        const title = this.props.title;
        const child = this.props.children; // 追記
        return (
            <React.Fragment>
                <p>{ title }</p>
                <p>{ child }</p> // 追記
    // 省略

これでprops.childrenが表示されたはずです。

コンポーネントから子コンポーネントに値を受け渡す方法も覚えておくと、

コンポーネントしか持っていない値を他のコンポーネントに与えることができるためとても便利ですね!

ベースレイアウトの作成

先ほど触れたprops.childrenを使用して、ポートフォリオサイトのベースレイアウトを作成していきましょう。

まずレイアウトとなるファイルをディレクトリとともに作成します。
components/layouts/BaseLayout.js

import React from 'react';
import BaseLayout from '../components/layouts/BaseLayout';

class About extends React.Component{
    render() {
        return (
            <BaseLayout>
                <h1>This is About page.</h1>
            </BaseLayout>
        )
    }
}

export default About;


次に以下のようにファイルを書き換えていってください。
pages/index.js

import React from 'react';
import BaseLayout from '../components/layouts/BaseLayout';


class Index extends React.Component{
    render() {
        return (
            <BaseLayout>
                <h1>This is index page.</h1>
            </BaseLayout>
        )
    }
}

export default Index;

pages/portfolios.js

import React from 'react';
import BaseLayout from '../components/layouts/BaseLayout';

class Portfolios extends React.Component{
    render() {
        return (
            <BaseLayout>
                <h1>This is Portfolio page.</h1>
            </BaseLayout>
        )
    }
}

export default Portfolios;

pages/cv.js

import React from 'react';
import BaseLayout from '../components/layouts/BaseLayout';

class Cv extends React.Component{
    render() {
        return (
            <BaseLayout>
                <h1>This is Cv page.</h1>
            </BaseLayout>
        )
    }
}

export default Cv;

pages/blogs.js

import React from 'react';
import BaseLayout from '../components/layouts/BaseLayout';

class Blogs extends React.Component{
    render() {
        return (
            <BaseLayout>
                <h1>This is Blog page.</h1>
            </BaseLayout>
        )
    }
}

export default Blogs;

pages/about.js

import React from 'react';
import BaseLayout from '../components/layouts/BaseLayout';

class About extends React.Component{
    render() {
        return (
            <BaseLayout>
                <h1>This is About page.</h1>
            </BaseLayout>
        )
    }
}

export default About;


書く量は多いのですが、index.js以外のファイルの中身はほとんど同じです。

各ファイルにタグを配置し、そのprops.childrenを利用して、表示を切り替えることができました。