Web開発ブログ

Typescriptでchildrenを受け取るReactコンポーネントを作るときはPropsWithChildrenを使うと楽になる

作成

2023/07/15

Typescriptでchildrenを受け取るReactコンポーネントを作ることは多い。


function Component({ children }: { children: ReactNode; }) {
    
    return <div>{children}</div>
};

PropsWithChildrenを使うとより簡潔にかける。vscodeを使っているとpropsと打つだけで入力候補にPropsWithChildrenが出てくるので楽。


function Component({ children }: PropsWithChildren) {
    
    return <div>{children}</div>
};

propsを追加するときは次のように書く。


function Component({ children, color }: PropsWithChildren & {
    color:string;
}) {
    
    return <div>{children}</div>
};

またはジェネリクスで渡す。


type HogeType = { color:string }
function Component({ children, color }: PropsWithChildren<HogeType>) {
    
    return <div>{children}</div>
};