Functional Componentで’missing display name’
- 2020/06/02
- React
ESLintででる
Component definition is missing display name react/display-name
デバッグのために、全てのコンポーネントに名前を付けることが推奨されるているため、無名関数だと怒られる。
回避方法はコンポーネントに対して名前をつけてあげることで解消される。
const Hoge = (props: HogeProps) => {
// 無名関数になってしまう
return ( props ) => <div {...props}>;
}
この場合、Hoge関数内部で定義する必要がある
const Hoge = (props: HogeProps) => {
const Element = (props: HogeProps) => <div {...props} />
return Element;
}
パターンとしてFowardRefなんかを使用したときにこのエラーが発生する
上記であげた方法以外にもこのような書き方でエラーを回避することもできる。
Hoge.displayName = 'hogehoge';
実際名前がなくても大丈夫な場合、ESLintのコメントアウトでエラーを回避してしまうのもあり
// eslint-disable-next-line react/display-name