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

Question

如何为此添加显示名称？

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

Answer 1

将函数放在变量中，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;

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>
  )
}

Answer 3

一种在displayName不创建命名函数的情况下向匿名组件函数添加属性的方法是使用recompose：

import { compose, setDisplayName } from 'recompose';

export default compose(setDisplayName('SomeComponent'))(props => ...);

要不就：

export default Object.assign(props => ..., { displayName: 'SomeComponent' });