← Back to rules

react/display-name 严格

An auto-fix is available for this rule.

它的作用

强制要求 React 组件具有 displayName 属性。

为什么这是不好的？

React DevTools 使用 displayName 来在组件树中显示组件名称。如果没有 displayName，组件在 DevTools 中将显示为“未知”。

示例

此规则的 错误 代码示例：

const MyComponent = () => <div>Hello</div>;

此规则的 正确 代码示例：

const MyComponent = () => <div>Hello</div>;
MyComponent.displayName = "MyComponent";

配置

此规则接受一个配置对象，包含以下属性：

checkContextObjects

type: boolean

默认值: false

当设置为 true 时，此规则会对没有 displayName 的上下文对象发出警告。

displayName 允许你命名你的上下文对象。该名称会在 React DevTools 中用于上下文的 Provider 和 Consumer。

ignoreTranspilerName

type: boolean

默认值: false

当设置为 true 时，规则将忽略转译器设置的名称，并在此情况下要求提供 displayName 属性。

如何使用

要通过配置文件或 CLI 启用 此规则，可以使用：

配置 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/display-name": "error"
  }
}

CLI

oxlint --deny react/display-name --react-plugin

参考资料

• 规则源码