eslint：组件定义缺少 displayName

Question

使用材料表（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;

Answer 1

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

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

更多关于它