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

另一种可能的解决方案是使用命名函数。

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

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

没有错误：

{
  Header: 'Order Items',
  accessor: 'orderItems',
  Cell: function OrderItems({ row }) {
    return (
      <a>
        View Items
      </a>
    );
  },
}

错误：

{
  Header: 'Order Items',
  accessor: 'orderItems',
  Cell: ({ row }) => (
    <a>
      View Items
    </a>
  )
}

Answer 3

将form.data属性添加到匿名组件函数而不创建命名函数的一种方法是使用string：

selection

或者只是：

displayName

Answer 4

由于 windows nvm，我遇到了这个问题。我使用的是 windows nvm 并安装了 node v8.17.0（因为该项目是在此版本上构建的）。但是卸载 nvm 并直接安装 node v8.17.0 对我有用。

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

4 个答案: