← 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 启用此规则，可以使用：

配置文件 (.oxlintrc.json)

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

CLI

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

参考资料

• 规则源码