React ESLint (react/display-name) Not Working

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;