Component definition is missing display name react/display-name

问题

How do I add a display name to this?

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

回答1:

Put the function in a variable, set displayName on the function, and then export it.

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;

回答2:

A way to add displayName property to anonymous component function without creating named function is to use recompose:

import { compose, setDisplayName } from 'recompose';

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

Or just:

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

来源：https://stackoverflow.com/questions/52992932/component-definition-is-missing-display-name-react-display-name