☰

コンポーネント定義に表示名 react/display-name がありません 質問する

tag-icon • tag-icon reactjs eslint
コンポーネント定義に表示名 react/display-name がありません 質問する

これに表示名を追加するにはどうすればよいですか?

export default () =>
  <Switch>
    <Route path="/login" exact component={LoginApp}/>
    <Route path="/faq" exact component={FAQ}/>
    <Route component={NotFound} />
  </Switch>;

ベストアンサー1

矢印関数を直接エクスポートすると、コンポーネントに は付与されませんdisplayNameが、通常の関数をエクスポートすると、関数名は として使用されますdisplayName。

export default function MyComponent() {
  return (
    <Switch>
      <Route path="/login" exact component={LoginApp}/>
      <Route path="/faq" exact component={FAQ}/>
      <Route component={NotFound} />
    </Switch>
  );
}

関数を変数に入れて、displayName関数に手動で設定し、エクスポートすることもできます。

const MyComponent = () => (
  <Switch>
    <Route path="/login" exact component={LoginApp}/>
    <Route path="/faq" exact component={FAQ}/>
    <Route component={NotFound} />
  </Switch>
);

MyComponent.displayName = 'MyComponent';

export default MyComponent;

おすすめ記事