Zenn
🔖

PropsWithChildrenのススメ

2023/04/08に公開
React
tech

知ってる？

PropsWithChildren の存在を知ってますか？
children を受け取るとき毎回 Props を書いていたら大変ですよね。

type Props = {
  children: ReactNode;
};

function Component1({ children }: Props) {
  // ...
}

PropsWithChildren を使うと

こんな感じにできます。

import { PropsWithChildren } from "react";

function Component1({ children }: PropsWithChildren) {
  // ...
}

他の Props を受け取るときは

次のようにしてください

import { PropsWithChildren } from "react";

type Props = {
  label: string;
};

function Component1({ children, label }: PropsWithChildren<Props>) {
  // ...
}

まあ中身がこんな感じなので当然ですね

type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };

最後に

React.FCとReact.VFCの良し悪し、Arrow Functionsを使うかどうかなど、様々な議論が今も続いています。調べてみてはいかがでしょうか。
自分なりのベストプラクティスを見つけることをお勧めします。
私はこの記事の書き方を採用しています。

GitHubで編集を提案

Discussion