javascript - eslint:组件定义缺少 displayName

Question

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

错误:

ESLint: Component definition is missing display name(react/display-name)

  ...
  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"
  }
}

more about it