← Back to rules

react/jsx-handler-names スタイル

何を行うか

イベントを処理するコンポーネントまたはプロップスのメソッドが正しい接頭辞で名前付けられていることを確認します。

なぜ問題か

イベントハンドラーやプロップスの命名が一貫していないと、コードの可読性および保守性が低下します。

例

このルールに違反する誤りのあるコードの例：

<MyComponent handleChange={this.handleChange} />
<MyComponent onChange={this.componentChanged} />

このルールに従う正しいコードの例：

<MyComponent onChange={this.handleChange} />
<MyComponent onChange={this.props.onFoo} />

設定

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

checkInlineFunctions

type: boolean

default: false

JSX属性内のインライン関数をチェックするかどうか。

checkLocalVariables

type: boolean

default: false

JSX属性内のローカル変数をチェックするかどうか。

eventHandlerPrefixes

type: string

default: "handle"

チェック対象とするイベントハンドラの接頭辞。

eventHandlerPropPrefixes

type: string

default: "on"

チェック対象とするイベントハンドラのプロップス接頭辞。

eventHandlerPropRegex

type: string

イベントハンドラのプロップス接頭辞用のコンパイル済み正規表現。

eventHandlerRegex

type: string

イベントハンドラ接頭辞用のコンパイル済み正規表現。

ignoreComponentNames

type: string[]

default: []

イベントハンドラ接頭辞のチェック対象から除外するコンポーネント名。

使い方

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

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-handler-names": "error"
  }
}

CLI

oxlint --deny react/jsx-handler-names --react-plugin

参照

• ルールのソース