Web開発ブログ

ESLintのno-children-propを無効にして、Reactコンポーネントのchildrenをpropsで渡せるようにする

作成

2023/07/13

Reactでchildrenに値を渡すときはタグで囲むことが推奨されている。


<Typography
    margin={2}
    paddingY={1}
    color='text.secondary'
    variant='body2'
>
    テキスト
</Typography>

でもchildrenが短い文字列の場合はpropsで渡したほうがまとまりがよくなる。


<Typography
    margin={2}
    paddingY={1}
    color='text.secondary'
    variant='body2'
    children='テキスト'
/>

Next.jsなどでこのようにすると、「Do not pass children as props. Instead, nest children between the opening and closing tags.」というESLlintの警告が出るため、設定を変更する。

.eslintrc.json（CRAを使っている場合はpackage.jsonのeslintConfig）の"rules"に次のように書く


{
  ...
  "rules": {
    "react/no-children-prop": "off"
    ...
  }
}

ただし誤って両方の使いかたをしてしまい、思った通りに表示されない危険性もあるので注意


<Typography
    margin={2}
    paddingY={1}
    color='text.secondary'
    variant='body2'
    children='テキスト１'
>
    テキスト２
</Typography>