🦁
but has no corresponding defaultProps declarationが出てるときの対処法
propType * is not required, but has no corresponding defaultProps declaration.
上記のようなエラーがVSCode上で出ている場合を指します
これはESLintの設定をしている場合に出ます。
propsに対して?オプショナルを付けている場合、
propsの省略が可能になりますが、値が省略されている場合は値はundefinedになってしまいます。
必須プロップではないすべてのプロップに対して、defaultProps 定義を強制しますというlintの設定がされているため、エラーが出てしまっています。
詳しくはこちらを参考にしてください。
解決方法
解決するには3種類あります。
解決方法1 defaultPropsの設定をしてあげる
以下のようにコンポーネントのpropsに対してdefaultPropsを設定すれば消えます。
私はこちらの解決方法を推奨します。
import React, { FC } from "react"
type Props = {
text: string
annotation?: string // ?オプショナルを付けて省略可能にしている
required: boolean
}
const TestComponent: FC<Props> = (props) => {
const { text, required, annotation } = props
return (
<div className="tw-flex tw-w-full tw-items-center tw-rounded-[4px] tw-bg-default tw-px-[12px] tw-py-[9px]">
<h4 className="!tw-mb-0 tw-text-[16px] !tw-font-bold">{text}</h4>
{required && (
<span className="tw-ml-[10px] tw-rounded-[4px] tw-bg-secondary tw-px-[7px] tw-py-[3px] tw-text-sm tw-text-white">
必須
</span>
)}
{annotation && <span>{annotation}</span>}
</div>
)
}
// デフォルト値を設定(?オプショナルを付与したpropsに対してのみ)
TestComponent.defaultProps = {
annotation: "",
}
export default TestComponent
解決方法2 設定をオフにする
.eslintrc.json
{
"plugins": [...],
"extends": [...],
"rules": {
//...その他ルールの記載
// 引数型に?を付けたときにDefoultPropsが必要なくなる 0:off
// "react/require-default-props": 0
}
}
解決方法3 対象コードにのみ設定を無視する
type Props = {
text: string
// eslint-disable-next-line react/require-default-props
annotation?: string
required: boolean
}
上記のうちどれか設定すればエラーは消えると思います。
1つ目を推奨しますが、チームやプロジェクトによって異なると思うので、相談してみてください。
Discussion