组件定义缺少显示名称react / display-name [英] 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>;

推荐答案

直接导出箭头功能不会 t给组件一个 displayName ，但是如果导出常规函数，该函数名称将用作 displayName 。 / p>

Exporting an arrow function directly doesn't give the component a displayName, but if you export a regular function the function name will be used as displayName.

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

您也可以将函数放在变量中，设置 displayName 手动操作该函数，然后将其导出。

You can also put the function in a variable, set the displayName on the function manually, 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;

这篇关于组件定义缺少显示名称react / display-name的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！