Children

components配下にPrimaryButton.tsxを作成します。

以下リンクのボタンのcssを利用して、記述します。

ボタンgetbootstrap

PrimaryButton.tsx◎

export const Button = () => {
  return (
    <button type="button" className="btn btn-primary">
      Primary
    </button>
  );
};

そして、primaryの部分を変えて何度も利用するため、前セクションで説明したようなpropsにて受け取るのもいいですが、childrenというpropsの受け取り方があります。childrenという変数名にてporpsを受け取るようにしましょう。

PrimaryButton.tsx◎

type Props = {
  children: string;
};

export const PrimaryButton = ({ children }: Props) => {
  return (
    <button type="button" className="btn btn-primary">
      {children}
    </button>
  );
};

上記を呼び出してみましょう。childrenを受け取る場合は、HTMLタグのように<PrimaryButton>button1</PrimaryButton>と開始タグ、終了タグを記述して、button1の部分がchildrenで受け取る値になります。

PrimaryButton.tsx◎

import { Breadcrumb } from "./components/BreadCrumb";
import { PrimaryButton } from "./components/Button";
...
    <div>
      <Breadcrumb items={items1} />
      <Breadcrumb items={items2} />
      <UserDetail />
      <PrimaryButton>button1</PrimaryButton>
      <PrimaryButton>button2</PrimaryButton>
    </div>
  );
};
...

上記にて以下のように確認できるかと思います。

childrenは子要素を全て受け取ることができるので、HTMLタグも渡すことできます。

<PrimaryButton>button<span>1</span></PrimaryButton>

上記のようにタグを渡す場合は、PrimaryButtonのchildrenの型をReactNodeという方にする必要があります。

import { ReactNode } from "react";

type Props = {
  children: ReactNode;
};