Props

Propsとはコンポーネントへ値を渡す仕組みで、例えばBreadcrumbコンポーネントを別の場所で使う場合に、Home, Library, Dateの部分を変えたいとすると、Breadcrumbの中で定義しているitemsを外部から渡すことで、解決することができます。

では、BreadcrumbにてPropsを受け取れるようにしましょう。Breadcrumbコンポーネントの引数としてpropsと記述します。慣習的に命名はpropsとします。

Breadcrumb.tsx◎

import { useState } from "react";

export const Breadcrumb = (props) => {
  const items = ["Home", "Library", "Date"];
 ...

次に受け取るpropsの型を定義しましょう。propsはオブジェクト型で値を受け取ります。今回はitemsという文字列型の配列を受け取るので、型エイリアスとして定義します。

定義した型エイリアスをpropsに型づけします。また、Breadcrumb内で定義しているitemsは削除しましょう。

Breadcrumb.tsx◎

import { useState } from "react";

type Props = {
  items: string[];
};

export const Breadcrumb = (props: Props) => {
  const [selectedValue, setSelectedValue] = useState("");
...

引数として受け取ったpropsを利用するためprops.itemsとして呼び出すこともできるのですが、const { items } = propsとすることで、オブジェクトから、プロパティやメソッドを展開することができます。

Breadcrumb.tsx◎

...
export const Breadcrumb = (props: Props) => {
  const { items } = props
...

さらに、propsとして受け取っている部分で展開することもできるので以下のように修正し、const { items } = propsは削除しましょう。

Breadcrumb.tsx◎

import { useState } from "react";

type Props = {
  items: string[];
};

export const Breadcrumb = ({ items }: Props) => {
  const [selectedValue, setSelectedValue] = useState("");
...

これでBreadcrumbコンポーネントはpropsを受け取れるようになりました。

では、呼び出し部分にてpropsを渡してみましょう。呼び出す方では、itemsという文字列型の配列を定義したとすると、<Breadcrumb items={items} />のようにpropsを渡すことができます。では、文字列型の配列の定数を2つ定義して、Breadcrumbコンポーネントを2つ呼び出しましょう。

const App = () => {
  const items1 = ["Home1", "Library1", "Date1"];
  const items2 = ["Home2", "Library2", "Date2"];
  return (
    <div>
      <Breadcrumb items={items1} />
      <Breadcrumb items={items2} />
      <UserDetail />
    </div>
  );
};

以下のようにブラウザにて確認できるかと思います。

このように、propsを利用することで、一部のみを変更して同じレイアウトやロジックを使い回すことができます。