React Props学んでみた【初心者】

Propsとは

Propsはコンポーネント間でデータの受け渡しを行うものである。
親コンポーネント(大元のページ)から子コンポーネントへデータを渡すことができる。

書き方

子コンポーネント側

ChildComponent.js

function ChildComponent (props) 

まずはこのように関数宣言の部分のカッコの部分にpropsと記述します。

ChildComponent.js

{props.関数名}

次に、入力したい部分を以上のように記述する。(関数名は親コンポーネント側で決める)

親コンポーネント側

ParentComponent.js

<ChildComponent 関数名="渡したいデータ"/>

子コンポーネントを呼び出す部分をこのように記述することで、子コンポーネントにデータを送ることができる。

例

親コンポーネント

page.js

import Image from "next/image";
import Footer from "./components/Footer";
import Links from "./components/Links";
import Headline from "./components/Headline";

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        <Image
          className="dark:invert"
          src="/next.svg"
          alt="Next.js logo"
          width={180}
          height={38}
          priority
        />
        <Headline page="index"/>
      <Links />
      </main>
      <Footer />
    </div>
  );
}

子コンポーネント

Headline.js

import Image from "next/image";
import React from "react";

function Headline(props) {
  return (
    <div>
      <h1>{props.page} Page</h1>
        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
          <li className="mb-2">
            Get started by editing{" "}
            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
              src/app/{props.page}.js
            </code>
            .
          </li>
          <li>Save and see your changes instantly.</li>
        </ol>
    </div>
  );
}

export default Headline

ここでは関数名をpageとしている。
ここには乗せてないが、aboutページにはaboutというデータを渡し、indexページとの差別化をしている。