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

Question

我想知道反应(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],
 }
 . . .
}

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

有没有我错过的配置？

Answer 1

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

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

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

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