eslint：组件定义缺少 displayName答案

【问题标题】：eslint: Component Definition is missing displayNameeslint：组件定义缺少 displayName
【发布时间】：2020-09-12 15:18:40
【问题描述】：

使用材料表 (https://material-table.com/#/docs/features/component-overriding)，我试图覆盖表的某个组件。它渲染得很好，但我想摆脱 intellij 向我抛出的 eslint 错误，而不仅仅是忽略/禁用它。

错误：

ESLint：组件定义缺少显示名称（反应/显示名称）

  ...
  return (
    <div className={classes.rootDiv}>
      <div className={classes.mainTableContainer}>
        <MainTable
          components={{
            Settings: (props) => <TableSettings name={'Steven'} {...props} /> // <- Error near (props)
          }}
          ...

表格设置

import React from 'react';

const TableSettings = (props) => {

  return (
    <div>
      <h1>Test</h1>
    </div>
  );
};

export default TableSettings;

【问题讨论】：

这些能回答你的问题吗？ eslint-github-discussion 或 setting-displayName
感谢 buzatto，但遗憾的是，到目前为止，我用谷歌搜索的两个链接和许多其他线程都没有让我清楚什么是正确的解决方案。
我猜想函数(props) => <TableSettings name={'Steven'} {...props} /> 被视为（实际上是）组件定义本身，因此错误将与该匿名箭头函数组件有关。你可能会克服传递一个命名的函数组件，如：Settings: TableSettings 或将 TableSettings 包装在另一个组件中，然后调用 Settings: TableSettingsWrapper

标签： javascript reactjs eslint material-table

【解决方案1】：

要根据需要忽略此规则，您需要将.eslintrc.json 设置为：

{
  // other configs...,
  "rules": {
    "react/display-name": "off"
  }
}

more about it

【讨论】：

感谢您的帮助！关闭设置，虽然是最后的手段，但我想避免。我宁愿理解并修复我的错误，也不愿让它默默地消失。如果没有人有提示可以正确修复它，我会使用那个提示。再次感谢