JIYIK CN >

Set the displayName property on the component to fix the "Component definition is missing display name" error, for example App.displayName = 'MyApp';. Alternatively, disable the ESLint rule for the line with the following comment - // eslint-disable-next-line react/display-name.

const App = () => {
  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
};

// 设置显示名称
App.displayName = 'MyApp';

export default App;

forwardRefsThis error is usually caused when using React .

The displayName property is used to provide a descriptive name for the React devtools extension's component.

Alternatively, we can disable ESlint rules for a single line by placing a comment right above the ESlint error that occurs.

// eslint-disable-next-line react/display-name
const App = () => {
  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
};

export default App;

This comment will disable the rule for a single line.

.eslintrc.jsAlternatively, we can disable a rule for the entire project by adding the property to the rules object of the file react/display-name.

module.exports = {
  rules: {
    "react/display-name": "off",
  }
}

We can also disable the rule for a single file by adding the following comment at the top of the file.

/* eslint-disable react/display-name */

// ... 你的代码