组件定义缺少显示名称 react/display-name

Question

如何为此添加显示名称？

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

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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;

原文由 Tholle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

tldr：将箭头函数切换为命名函数

显示的 Lint 错误： Component definition is missing display name react/display-name 。

要解决，您可以 命名您的函数（IOW，不要使用箭头函数）。在此示例中，我使用 react-table 并传递自定义组件以在单元格中呈现。

没有错误：

 {
  Cell: function OrderItems({ row }) {
    return (
      <a>
        View Items
      </a>
    );
  },
}

错误：

 {
  Cell: ({ row }) => (
    <a>
      View Items
    </a>
  )
}

原文由 DeBraid 发布，翻译遵循 CC BY-SA 4.0 许可协议