反应 ESLint (react/display-name) 不工作

Question

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

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

例如

Component.jsx

import React from 'react';

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

export default Component;

.eslintrc

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

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

有没有我遗漏的配置？

Answer 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;

React ESLint (react/display-name) Not Working