React ESLint (react/display-name) 不工作答案

【问题标题】：React ESLint (react/display-name) Not WorkingReact ESLint (react/display-name) 不工作
【发布时间】：2020-09-23 10:03:19
【问题描述】：

我想知道 react (react/display-name) 的 eslint 规则是否适用于任何人？

目前，在我的代码中，如果我不输入displayName，它不会显示任何警告。我期待如果我不输入displayName，它会抛出一个 eslint 警告消息。

例如

组件.jsx

import React from 'react';

const Component = () => {
 return (
  <h1>Hello World</h1>
 );
};

export default Component;

.eslintrc

{
 . . .
 "rules": {
  "react/display-name": [2],
 }
 . . .
}

我期望应该有一个 lint 警告，但没有出现。

有没有我遗漏的配置？

【问题讨论】：

【解决方案1】：

只有当您的组件没有名称时，此规则才会显示错误。在您的情况下，您的组件名称是Component。这是因为 react 会自动转换组件的名称。

如果您不希望名称为transpiled automatically，则需要使用"react/display-name": [2, { "ignoreTranspilerName": true }], 禁用转译名称。然后你会得到你期望的行为。

如果您的组件如下所示，您当前配置的规则将引发错误：

const Hello = createReactClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
module.exports = Hello;

【讨论】：