Posted at

【React】【typescript】Functional Component の defaultProps の定義方法


はじめに

最近 React Component を実装する際は Functional Component で書いています。

その際、 defaultProps の解決方法に躓いたので書きます。


他でよく紹介されている方法

import React from 'react';

type Props = {
foo?: string;
}

const BarComponent = (props: Props) => {
return (
<div>{props.foo}</div>
);
}
BarComponent.defaultProps = {
foo: 'FOO'
}

この方法だと props.foostring | undefined になってしまうという問題があります。


解決方法

import React from 'react';

type Props = {
foo?: string;
}

const BarComponent = ({ foo: 'FOO' }: Props) => {
return (
<div>{foo}</div>
);
}

これで foostring になります。

というのを上司に教えてもらいました。

これで問題があれば教えてください。