← Back to rules

react/display-name 泥臭い

何をするか

React コンポーネントに displayName プロパティがあることを強制します。

なぜ悪いのか

React DevTools は displayName を使ってコンポーネントツリー内のコンポーネント名を表示します。 displayName がなければ、DevTools ではコンポーネントが "不明" と表示されます。

例

このルールに対して誤りなコードの例:

const MyComponent = () => <div>こんにちは</div>;

このルールに対して正しいコードの例:

const MyComponent = () => <div>こんにちは</div>;
MyComponent.displayName = "MyComponent";

設定

このルールは以下のプロパティを持つ設定オブジェクトを受け取ります：

checkContextObjects

type: boolean

default: false

true の場合、このルールは displayName のないコンテキストオブジェクトに対して警告します。

displayName を使うことで、コンテキストに名前を付けることができます。 この名前は、コンテキストの Provider および Consumer に対して React DevTools で使用されます。

ignoreTranspilerName

type: boolean

default: false

true の場合、トランシパイラーによって設定された名前を無視し、このケースでは displayName プロパティが必要になります。

使用方法

設定ファイルまたは CLI でこのルールを有効化するには、次のようにします：

設定 (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース